‍Required Attribute

data-tippy-content=“Enter your tooltip copy here”

‍

Optional Attributes

PLACEMENT

data-tippy-placement=“top”

Controls where the tooltip appears relative to the element.

‍Options:

1. top (default)
2. bottom
3. left
4. right

Advanced alignment:

1. top-start / top-end
2. bottom-start / bottom-end
3. left-start / left-end
4. right-start / right-end

‍

Theme (styling)

data-tippy-theme=“light-custom”

Controls tooltip background and text colour via predefined themes.

Available themes:

1. light-custom
2. warning
3. gold
4. bronze

‍

Default (no attribute): Black background with Off-white text

‍

Example Usage

‍

Default tooltip

data-tippy-content=“This is a tooltip”

‍

Light tooltip on bottom

data-tippy-content=“Helpful info”

data-tippy-theme=“light-custom”

data-tippy-placement=“bottom”

‍

Warning tooltip on right

data-tippy-content=“Important message”

data-tippy-theme=“warning”

data-tippy-placement=“right”

‍

How styling works (for dev awareness)

• Themes use CSS variables:
  • –tippy-bg → background colour
  • –tippy-text → text colour
• Arrow colour automatically matches background
• New themes can be added in CSS without changing JS
• ‍

Best Practices

1. Keep tooltips short and helpful (1–2 lines)
2. Use top for most cases
3. Use right / left for tighter UI (e.g. forms)
4. Use themes consistently

‍