Advertisemen
This is what we will create in this chapter -
First, type the following in your html ---
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Light Box</title>
<style type="text/css">
#toolTip>span{ //// 2
position: absolute;
background: yellow;
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
font-size: 15px;
display: none;
}
#toolTip>span::before{ //// 3
position: absolute;
content: "";
width: 0px;
height: 0px;
left: -12px;
top: 10px;
border: 6px solid;
border-color: #000 #000 transparent transparent;
}
#toolTip:hover>span{ //// 4
display: block;
margin-left: 240px;
margin-top: -30px;
}
</style>
</head>
<body>
<h2 id="toolTip">Aarlangdi Production<span>This is aarlangdi production</span></h2> /// 1
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Light Box</title>
<style type="text/css">
#toolTip>span{ //// 2
position: absolute;
background: yellow;
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
font-size: 15px;
display: none;
}
#toolTip>span::before{ //// 3
position: absolute;
content: "";
width: 0px;
height: 0px;
left: -12px;
top: 10px;
border: 6px solid;
border-color: #000 #000 transparent transparent;
}
#toolTip:hover>span{ //// 4
display: block;
margin-left: 240px;
margin-top: -30px;
}
</style>
</head>
<body>
<h2 id="toolTip">Aarlangdi Production<span>This is aarlangdi production</span></h2> /// 1
</body>
</html>
I don't, you can see or not but there are some numbers next to some codes.
So, first add code no - 1 in your html file which is nothing but h2 tag with some text inside but notice that there is span tag as well because we will call that tag from css later on.
Add, code block 2, which explains the position, visibility and others of span tag inside h2 tag.
code block 3 adds little triangle pointer next to tooltip, you will that when you run this code.
code block 4 turns on the visibility of span tag when hover on h2 tag.
That's all, just copy and paste and run the code.
Advertisemen
Tidak ada komentar:
Posting Komentar