Tooltip

Hover-triggered tooltip portaled to body for correct positioning.

Live Demo

Hover over the highlighted text to see a tooltip. Also try this one.

Source

HTML + JavaScript 
<div data-component="my-tooltip">
    <span class="has-tooltip"
          data-action="mouseover:showTip mouseout:hideTip"
          data-tip="Helpful information here">hover me</span>

    <!-- Portal ensures tooltip escapes overflow:hidden parents -->
    <div data-show="tipVisible" data-portal="body">
        <div class="tooltip-popup" data-bind-style="tipStyle"
             data-bind="tipText"></div>
    </div>
</div>

<script>
wildflower.component('my-tooltip', {
    state: {
        tipVisible: false,
        tipText: '',
        tipStyle: {}
    },
    showTip(e) {
        const rect = e.target.getBoundingClientRect();
        this.tipText = e.target.dataset.tip;
        this.tipStyle = {
            position: 'fixed',
            left: rect.left + 'px',
            top: (rect.top - 32) + 'px'
        };
        this.tipVisible = true;
    },
    hideTip() { this.tipVisible = false; }
});
</script>

Key Points

  • data-action="mouseover:showTip mouseout:hideTip" binds two events on one element
  • data-portal="body" teleports the tooltip outside any overflow: hidden container. It renders at the body level
  • data-bind-style="tipStyle" positions the tooltip dynamically using getBoundingClientRect()
  • The tooltip content comes from a data-tip attribute on the trigger, read in the action method via e.target.dataset.tip

Related documentation

Portals →