Usage
Install the package via npm (npm i css-tooltip) or directly you can include it from unpkg.com.
Just include a link tag to the tooltip css file on the head of your document:
<link rel="stylesheet" src="https://unpkg.com/css-tooltip" />Add the data-tooltip attribute to the element you want the tooltip in:
<span data-tooltip="Tooltip text">tooltip</span>
You can also use different classes to style the tooltip with different positioning:
.tooltip-multiline, .tooltip-bottom, .tooltip-bottom-right, .tooltip-bottom-left, .tooltip-top-right, .tooltip-top-left
Examples
💬 Using tooltips on different elements, span with a tooltip here, but not here.
Hyperlinks with tooltip: standard style tooltip (
data-tooltip="Lorem ipsum dolor sit amet...").
💬 a multiline tootltip multiline placed at the bottom (class="tooltip-multiline tooltip-bottom")
/ another element with tootltip on the bottom-right (class="tooltip-bottom-right")
and
another one more (placed on bottom-left) (class="tooltip-bottom-left").
- Element with tooltip on top (default)
- hyperlink with Tooltip on top left and another one with tooltip on top right (
class="tooltip-top-left").
More Info
- GitHub Repository : github.com/alterebro/css-tooltip
- NPM package : npm.im/css-tooltip
- UNPKG link : unpkg.com/css-tooltip