Tooltip

A tooltip is like a digital whisper, providing a brief message or hint when you hover over an element on a website. It's the digital equivalent of a helpful friend, quietly offering guidance or information without interrupting your browsing experience. With a tooltip, you can quickly get the information you need, without having to search for it or ask for help.

Examples

<div
  style="display: flex;align-items: center;justify-content:center;width:100%;height:100%;position: absolute;inset:0;">
  <div style="display: flex;gap:2rem;">

    <a href="javascript:;" class="has-tooltip on-hover">
      Tooltip
      <span class="tooltip">
      <span>test</span>
    </span>
    </a>

    <a href="javascript:;"  class="has-tooltip on-hover">
      ?
      <span class="tooltip to-left" style="--xii-tooltip-padding: 0.75rem;">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</span>
    </span>
    </a>

    <a href="javascript:;" class="has-tooltip on-hover">
      ?
      <span class="tooltip to-bottom" style="--xii-tooltip-padding: 0.75rem;">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</span>
    </span>
    </a>

    <a href="javascript:;" class="has-tooltip on-hover">
      ?
      <span class="tooltip to-right" style="--xii-tooltip-padding: 0.75rem;">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</span>
    </span>
    </a>

  </div>
</div>

@use '~/styles/app.scss' as app;

// Load tooltip component
@include app.generate-component(
  app.get-theme(app.$theme, 'components.tooltip'),
  'has-tooltip',
  app.$config,
  app.$theme,
  ( variable: (name : 'tooltip') )
);

With arrow

<div
  style="display: flex;align-items: center;justify-content:center;width:100%;height:100%;position: absolute;inset:0;">
  <div style="display: flex;gap:2rem;">

    <a href="javascript:;" class="has-tooltip on-hover">
      Tooltip
      <span class="tooltip with-arrow">
      <span>test</span>
    </span>
    </a>

    <a href="javascript:;" class="has-tooltip on-hover">
      ?
      <span class="tooltip with-arrow to-left" style="--xii-tooltip-padding: 0.75rem;">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</span>
    </span>
    </a>

    <a href="javascript:;" class="has-tooltip on-hover">
      ?
      <span class="tooltip with-arrow to-bottom" style="--xii-tooltip-padding: 0.75rem;">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</span>
    </span>
    </a>

    <a href="javascript:;" class="has-tooltip on-hover">
      ?
      <span class="tooltip with-arrow to-right" style="--xii-tooltip-padding: 0.75rem;">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</span>
    </span>
    </a>

  </div>
</div>

@use '~/styles/app.scss' as app;

// Load tooltip component
@include app.generate-component(
  app.get-theme(app.$theme, 'components.tooltip'),
  'has-tooltip',
  app.$config,
  app.$theme,
  ( variable: (name : 'tooltip') )
);