Intro

Demo

With Custom Tooltip (image)

With Optional Tooltip

This is an example content, add yours.

Components

• tooltip

  StructureA wrapper div (position: relative) containing the trigger content — wrapped in its own div so slotted content of any kind can be measured and referenced by id — followed by a bubble div holding the tooltip text and a small arrow div.positionTooltip is an internal formula used to calculte the tooltip's positioning.bubble-text-color etc...bubble-background-color, bubble-text-color, bubble-font-family, bubble-font-size etc. Tooltip styling variables. Leave empty as null to use defaults.bubble-text-contentThis gets passed down to the default bubble component element bundled within the tooltip. Set this if you wish to use that default tooltip. Else leave it empty.delayAdd a custom delay. 0 sets this to instantly show tooltip on hover. Any other value not a number would default to 300ms.tt-marginThe gap between your trigger element and the bubble. It controls how far the tooltip floats away from the thing you're hovering. You can see it in two places: the bubble's position is set to calc(100% + tt-margin * 1px), meaning "sit one full trigger-height below, plus this many extra pixels" (default 8px), and it's also handed to the positionTooltip formula so the positioning math knows that same gap when deciding where the bubble and arrow land.tt-viewport-paddingThe safety clearance from the screen edges. It's passed to positionTooltip as viewportPadding, which uses it when clamping the bubble's horizontal position: no matter where the trigger sits, the tooltip never gets closer than this many pixels to the left or right edge of the viewport (default 8px). Without it, a trigger near the screen edge would push the tooltip half off-screen.uidAdd a custom delay. 0 sets this to instantly show tooltip on hover. Any other value not a number would default to 300 (for 300ms).BehaviorHovering on the tooltip or clicking on the trigger opens the tooltip (after a delay for hover - defaults to 300ms) so a cursor passing briefly overhead doesn't trigger it.Set delay to 0 to show it instantly. Direct click on the trigger or keyboard focus/blur on the trigger opens/closes it instantly, since a deliberate mouse or keyboard interaction shouldn't carry an artificial delay.The trigger slot is auto populated with an SVG. Put in your own trigger element in this slot, or it will load this default SVG every time. If that is your preferred behaviour then leave it.

• bubble

  Not exported, but includedThis is the optional tooltip bubble component element. This comes by default, with the tooltip component. Replace with your own bubble element, and let tooltip to handle the functionality.Style this minimally with the provided bubble-xxx attributes on the tooltip.Remember to drop your bubble component element in the bubble slot.