Understanding Tooltip
Tooltip is an information display that can be an image or text that appears when the pointer is hovered over a tooltip item. there are many ways to create a tooltip, there are also tooltips that provide complete information and some are brief depending on your needs.
How to Create a Full CSS Tooltip
Add CSS styles to the template code
Please add the styles below to your respective templates, the goal is that you don't need to rewrite the css styles when creating a tooltip in posts, just write the html.
- Select the theme menu
- Select edit HTML
- Look for the closing code head </style>or merge it with the existing css then copy and paste.
<style type='text/css'>
/* CSS Tooltip by www.magelang1337.com */
.tooltip {
display:inline-block;
position:relative;
}
.tooltip .top-info {
min-width:200px;
top:-20px;
left:50%;
transform:translate(-50%, -100%);
padding:0 10px;
color:#444444;
background-color:#4ee1f5;
font-weight:normal;
font-size:13px;
border-radius:8px;
position:absolute;
z-index:9999;
box-sizing:border-box;
border:1px solid #4ee1f5;
visibility:hidden; opacity:0; transition:opacity 0.8s;
}
.tooltip:hover .top-info {
visibility:visible; opacity:1;
}
.tooltip .top-info i {
position:absolute;
top:100%;
left:50%;
margin-left:-12px;
width:24px;
height:12px;
overflow:hidden;
}
.tooltip .top-info i::after {
content:'';
position:absolute;
width:12px;
height:12px;
left:50%;
transform:translate(-50%,-50%) rotate(45deg);
background-color:#4ee1f5;
border:1px solid #4ee1f5;
}
</style>Add the HTML tooltip code
Please copy and paste the following tooltip code in your post, you can customize the desired text information yourself.
</div> <div class="tooltip">Touch Me To See About Me
<div class="top-info">
<h3>Master Design</h3>
<p>Blog programming tutorials, information on general science &technology, SEO, PHP, jQuery, CSS, HTML, JavaScript, Database, Widgets &web Tools.</p>
<i></i>
</div>
</div>