Tooltip

How it works?

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Basic example

Click the accordions below to expand/collapse the accordion content.

<x-tooltip title="I'm default tooltip">Hover to see default tooltip</x-tooltip>
<x-tooltip title="I'm tooltip on span tag" tag="span">Hover to see tooltip on span tag</x-tooltip>
<x-tooltip title="I'm tooltip on link tag" href="/docs/components/tooltip">Hover to see tooltip on link with href</x-tooltip>
<a href="#"
      data-controller="tooltip"
      data-bs-placement="top"
      data-bs-html="false"
      data-bs-trigger="hover focus"
      title="I'm default tooltip">Hover to see default tooltip</a><br>
<span data-controller="tooltip"
      data-bs-placement="top"
      data-bs-html="false"
      data-bs-trigger="hover focus"
      title="I'm tooltip on span tag">Hover to see tooltip on span tag</span><br>
<a href="/docs/components/tooltip"
      data-controller="tooltip"
      data-bs-placement="top"
      data-bs-html="false"
      data-bs-trigger="hover focus"
      title="I'm tooltip on link tag">Hover to see tooltip on link with href</a>

Placement example

Click the accordions below to expand/collapse the accordion content.

<x-tooltip title="I'm top tooltip" placement="top">Hover to see top tooltip</x-tooltip>
<x-tooltip title="I'm right tooltip" placement="right">Hover to see right tooltip</x-tooltip>
<x-tooltip title="I'm bottom tooltip" placement="bottom">Hover to see bottom tooltip</x-tooltip>
<x-tooltip title="I'm left tooltip" placement="left">Hover to see left tooltip</x-tooltip>
<a href="#"
      data-controller="tooltip"
      data-bs-placement="top"
      data-bs-html="false"
      data-bs-trigger="hover focus"
      title="I'm top tooltip">Hover to see top tooltip</a><br>
<a href="#"
      data-controller="tooltip"
      data-bs-placement="right"
      data-bs-html="false"
      data-bs-trigger="hover focus"
      title="I'm right tooltip">Hover to see right tooltip</a><br>
<a href="#"
      data-controller="tooltip"
      data-bs-placement="bottom"
      data-bs-html="false"
      data-bs-trigger="hover focus"
      title="I'm bottom tooltip">Hover to see bottom tooltip</a><br>
<a href="#"
      data-controller="tooltip"
      data-bs-placement="left"
      data-bs-html="false"
      data-bs-trigger="hover focus"
      title="I'm left tooltip">Hover to see left tooltip</a><br>