| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Name | Name | Last commit date | ||
|---|---|---|---|---|
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: hidden to the body element
| Back | FazBrowse Home | New Git URL |