HOW TO SET UP tooltips.css
1. Buy and download library.
2. Copy the tooltips.css or tooltips.min.css file into your project and link it to HTML file.
HOW TO USE tooltips.css
1. Pick the element you want to have hover-on tooltip.
2. Add to it any tooltip attribute from available.
3. Optionally set tooltip position by adding tooltip_position attribute.
Example:
<div underglow_tooltip = "This is a tooltip" tooltip_position = "left">Hello</div>
SETTINGS AND OPTIONS:
default_tooltip | arrowed_tooltip |
blurred_tooltip | backdrop_tooltip |
bordered_tooltip | highlighted_tooltip |
classic_tooltip | animated_tooltip |
underglow_tooltip | warning_tooltip |
info_tooltip | laser_tooltip = "This text will be a tooltip"
blurred_tooltip | backdrop_tooltip |
bordered_tooltip | highlighted_tooltip |
classic_tooltip | animated_tooltip |
underglow_tooltip | warning_tooltip |
info_tooltip | laser_tooltip = "This text will be a tooltip"
This is the main tooltip attribute.
Apply it to any HTML element to add a tooltip that appears on hover.
Depending on the attribute name, the tooltip will have a different style and behavior.
You can test them out on this demo page.
Apply it to any HTML element to add a tooltip that appears on hover.
Depending on the attribute name, the tooltip will have a different style and behavior.
You can test them out on this demo page.
tooltip_position = "top" | "bottom" | "left" | "right"
Changes the position of the tooltip.
Without specifying the attribute, the tooltip will default to the "top" position.
Without specifying the attribute, the tooltip will default to the "top" position.