CSS Tooltips animation with responsive

 

CSS Tooltips

CSS Tooltips are a great way to display extra information about something when the user moves the mouse cursor over an element.

Example of animation:

<!DOCTYPE html>
<html>
<style>
.tooltip1 {
position: relative;
display: inline-block; border-bottom: 1px dotted black; }
.tooltip1 .tooltiptext1 { visibility: hidden;
width: 160px;
background-color: red;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px; } .tooltip1:hover .tooltiptext1 { visibility: visible;
}
</style>
<body style="text-align:center;">
<br>
<h2>Top Tooltip Example</h2> <p>Move your mouse cursor over the below heading</p>
<div class="tooltip1">
<strong> Welcome Teaching bangla bong71</strong>
<span class="tooltiptext1">In this website you can learn web designing language html,css,php,etc. Also learn advance web design. </span>
</div>
</body>
</html>


Next Post Previous Post
No Comment
Add Comment
comment url