Check out this example page.
Clone the project
git clone https://github.com/jonathanpauluze/tooltipJS.git
In the cloned folder, copy the tooltip.js file for your project folder, and link the file in your HTML.
<!-- index.html -->
<body>
<script type="text/javascript" src="tooltip.js"></script>
<body>To add a tooltip in your element, add the property data-tooltip-container.
<!-- index.html -->
<div data-tooltip-container>
<!-- content... -->
</div>Then add the property data-tooltip-label with the text you want in your tooltip box.
<!-- index.html -->
<div
data-tooltip-container
data-tooltip-label="Tooltip text here :)"
>
<!-- content... -->
</div>Now the JavaScript is working fine. But we need to add some css to make the tooltip box work properly. The needed style is:
.tooltip {
position: absolute;
}And this is the style in used in the example page:
.tooltip {
position: absolute;
width: 140px;
padding: 15px 10px;
border-radius: 4px;
font-family: monospace;
text-align: center;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}💡 Is recommended to add
overflow: hiddento the body element