CODE:
<!DOCTYPE html>
<html>
<head>
<title>Simple tooltip task</title>
<style>
div{border-bottom: 1px dotted red;
width: 230px; height: 50px;padding: 20px;
display: inline-block; position: absolute;}
div span{ visibility: hidden; width: 120;
background-color: red;color: white;
text-align: center; z-index: 1;}
div:hover span{visibility: visible;}
</style>
</head>
<body>
<div>Hover over me.<br/>
<span>This is simple division tag in html.</span>
</div>
</body>
</html>
OUTPUT:
<!DOCTYPE html>
<html>
<head>
<title>Simple tooltip task</title>
<style>
div{border-bottom: 1px dotted red;
width: 230px; height: 50px;padding: 20px;
display: inline-block; position: absolute;}
div span{ visibility: hidden; width: 120;
background-color: red;color: white;
text-align: center; z-index: 1;}
div:hover span{visibility: visible;}
</style>
</head>
<body>
<div>Hover over me.<br/>
<span>This is simple division tag in html.</span>
</div>
</body>
</html>
OUTPUT:
No comments:
Post a Comment