Author: | timothy0022000 |
---|---|
Views Total: | 5,944 views |
Official Page: | Go to website |
Last Update: | July 13, 2015 |
License: | MIT |
Preview:

Description:
This is a simplest CSS solution to create custom tooltips on any DOM elements using html5 data attribute and CSS ::before & ::after selectors.
How to use it:
Add a custom tooltip to an element using data-tip attribute.
<span class="tool" data-tip="Hyper Text Makeup Language">HTML</span>
The core CSS styles for the custom tooltip.
.tool { cursor : help; position : relative; } .tool::before, .tool::after { position : absolute; left : 50%; opacity : 0; z-index: -100; } .tool:hover::before, .tool:focus::before, .tool:hover::after, .tool:focus::after { opacity : 1; z-index: 100; } .tool::before { border-style : solid; border-width : 1em .75em 0 .75em; border-color : #3e474f transparent transparent transparent; bottom : 100%; margin-left : -.5em; content : " "; } .tool::after { background : #3e474f; border-radius : .25em; bottom : 180%; color : white; width : 17.5em; padding: 1em; margin-left : -8.75em; content : attr(data-tip); }