Lightweight Tooltip Library with Smart Positioning – easy-tooltips

easy-tooltips is a lightweight tooltip library that attaches customizable, hover- and tap-triggered tooltips to any elements.

Features:

• Automatic positioning with viewport boundary detection
• Touch and mouse interaction support
• CSS variable customization system
• Intelligent arrow positioning and tooltip shifting
• Built-in animations with configurable timing
• Multi-line tooltip support with HTML content

How to use it:

1. Install and import easy-tooltips into your project.

# NPM
$ npm install easy-tooltips

import "easy-tooltips/styles.css"
import "easy-tooltips"

2. Or use it directly in the browser:

<link rel="stylesheet" href="dist/easy-tooltips.min.css" />
<script src="dist/easy-tooltips.min.js"></script>

3. Add the data-tooltip attribute to your target elements:

<span data-tooltip="Tooltip Content">
  Hover Me
</span>

<span data-tooltip="Tooltip Content">
<b>HTML</b> Content
</span>

4. You can style specific tooltips by giving them an ID with data-tooltip-id. Then target that ID in your CSS to override the default CSS variables.

<span data-tooltip="Tooltip Content" data-tooltip-id="example">
  <b>HTML</b> Content
</span>

#example {
  --tooltip-background: #222;
  --tooltip-border-color: #333;
}

5. You can also override the default CSS variables to make global changes.

• --tooltip-vertical-distance: Distance from trigger element
• --tooltip-viewport-padding: Minimum screen edge distance
• --tooltip-arrow-size: Arrow dimensions
• --tooltip-arrow-edge-buffer: Arrow positioning constraints
• --tooltip-animation-length: Fade animation duration

:root {
  --tooltip-vertical-distance: 16px;
  --tooltip-arrow-size: 12px;
  --tooltip-arrow-edge-buffer: 12px;
  --tooltip-viewport-padding: 16px;
  --tooltip-background: #fff;
  --tooltip-border-color: #aaa;
  --tooltip-border-size: 1px;
  --tooltip-animation-length: .15s;
  --tooltip-arrow-radius: 0;
}

The post Lightweight Tooltip Library with Smart Positioning – easy-tooltips appeared first on CSS Script.