CSS tooltip

💬 CSS Tooltip

Only CSS lightweight, minimal and simple tooltips 💬

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").

More Info