StorePress Tooltip

Basic usage

Add data-storepress-tooltip="…" to any element. That's it — the plugin auto-initializes on DOMContentLoaded and reads the tooltip text straight from the attribute.

<button data-storepress-tooltip="Hover over me">Hover me</button>
<a href="#" data-storepress-tooltip="Links work too">A link</a>
<span tabindex="0" data-storepress-tooltip="Focus me with Tab">Focusable span</span>

Custom colors

Styling is entirely CSS-driven. Override --tooltip-text-color and --tooltip-background-color per element (or scope them to any selector).

[data-storepress-tooltip] {
  --tooltip-background-color: #e31616;
  --tooltip-text-color: #ffffff;
}

Sizing & spacing

Fine-tune the bubble with --tooltip-font-size, --tooltip-max-width, --tooltip-padding, --tooltip-offset (distance from the trigger) and --tooltip-angle (arrow size).

Image tooltips

Set the --tooltip-image custom property to a url(...) and the same attribute doubles as an image preview. Add .storepress-tooltip-type-image as a fallback for browsers without @container style() support.

<div
  class="storepress-tooltip-type-image"
  style="--tooltip-image: url('images/sample.jpg')"
  data-storepress-tooltip="Image caption"></div>

Viewport-edge handling

Tooltips shift horizontally to stay inside the viewport instead of clipping off-screen. Try the swatches pinned to the left and right edges of this card.

RTL support

Wrap content in a dir="rtl" container and the plugin automatically mirrors tooltip and arrow offsets.

Accessibility

Elements with tabindex show their tooltip on :focus-visible as well as hover, so keyboard users get the same information. Motion is disabled automatically when the OS prefers-reduced-motion.

JavaScript API

Every tooltip is controllable at runtime through StorePressTooltip (or StorePress.Utils.getStorePressPlugin('tooltip') when using the global build).

import StorePressTooltip from '@storepress/tooltip'

document.addEventListener('DOMContentLoaded', () => {
  StorePressTooltip.init()      // (re)attach events to matching elements
  StorePressTooltip.destroy()   // detach events, keep tooltips queryable
  StorePressTooltip.reload()    // destroy() + init()
})

// From anywhere else, without importing the module directly:
const Tooltip = StorePress.Utils.getStorePressPlugin('tooltip')
Tooltip.destroy()
Tooltip.init()

const all = StorePress.Utils.getStorePressPlugin('tooltip').get()
const one = StorePress.Utils.getPluginInstance('#api-target', 'tooltip')

Install & wire up

Two ways to use this in your own project.

<link rel="stylesheet" href="./build/style-tooltip.css" />
<script src="./build/storepress-utils.js"></script>
<script src="./build/tooltip.js"></script>

<button data-storepress-tooltip="Tooltip text">Hover</button>

npm i @storepress/tooltip @storepress/utils --save

// custom-tooltip.scss
@use "~@storepress/tooltip/src/mixins" as tooltip;

@include tooltip.init();

[data-storepress-tooltip] {
  --tooltip-text-color: #ffffff;
  --tooltip-background-color: #e31616;
}

// scripts.js
import StorePressTooltip from '@storepress/tooltip'

document.addEventListener('DOMContentLoaded', () => {
  StorePressTooltip.init()
})