See the codepen demo by clicking the image below.
Codepen Demo
Click the image below to load the demo.This demo was created using HTML5 on-click load iframe generator
The HTML
To add a tooltip to your webpage wrap the word with <dfn data-info=”hover info”></dfn> tag. The dfn tag is used to mark the defining instance of a term. Learn more about dfn tag here.
<p>This is a demo showing usage of tooltips.<dfn data-info="I am the hover content">Hover me</dfn></p>
The CSS
/* Styling dfn tag to highlight the word with the tooltip */ dfn { background: rgba(0,0,0,0.2); border-bottom: dashed 1px rgba(0,0,0,0.8); padding: 0 0.4em; cursor: help; font-style: normal; position: relative; } dfn::after { content: attr(data-info); display: inline; position: absolute; top: 22px; left: 0; opacity: 0; width: 230px; font-size: 13px; font-weight: 700; line-height: 1.5em; padding: 0.5em 0.8em; background: rgba(0,0,0,0.8); color: #fff; pointer-events: none; /* This prevents the box from apearing when hovered. */ transition: opacity 250ms, top 250ms; } dfn::before { content: ''; display: block; position: absolute; top: 12px; left: 20px; opacity: 0; width: 0; height: 0; border: solid transparent 5px; border-bottom-color: rgba(0,0,0,0.8); transition: opacity 250ms, top 250ms; } dfn:hover {z-index: 2;} /* Keeps the info boxes on top of other elements */ dfn:hover::after, dfn:hover::before {opacity: 1;} dfn:hover::after {top: 30px;} dfn:hover::before {top: 20px;}
You may also like
Please share this article on social media.