Tooltips

Overview

Tooltip allows you to give a piece of information, mostly, in the shortest way. This component has many props enabling you to customize the content you want to show. Here are many examples you can achieve.

Tooltip as Text

A regular way to tooltip is just to pass to text props a string value as message.

I'm a tooltip but to left

Tooltip Left

I'm a tooltip by default to top

Hover me !

I'm a tooltip showing at bottom

Tooltip Bottom

I'm a tooltip and I'm at right

Tooltip Right

Copied !

---
import Badge from "$components/badge/Badge.astro";
import Tooltip from "$components/tooltip/Tooltip.astro";
---

<div class="grid grid-cols-2 items-center gap-4">
  <div>
    <Tooltip text="I'm a tooltip but to left" position="left">
      <Badge text="Tooltip Left" />
    </Tooltip>
  </div>
  <div>
    <Tooltip text="I'm a tooltip by default to top">
      <Badge text="Hover me !" />
    </Tooltip>
  </div>
  <div>
    <Tooltip text="I'm a tooltip showing at bottom" position="bottom">
      <Badge text="Tooltip Bottom" />
    </Tooltip>
  </div>
  <div>
    <Tooltip text="I'm a tooltip and I'm at right" position="right">
      <Badge text="Tooltip Right" />
    </Tooltip>
  </div>
</div>

Tooltip as HTML

It could be interesting to pass html content to tooltip. You can do that with html props. The string value will contain your html content.

However, be careful with what you pass to this props to avoid XSS attack.

This is HTML content, be careful of what you pass here.

Hover me !

Copied !

---
import Badge from "$components/badge/Badge.astro";
import Tooltip from "$components/tooltip/Tooltip.astro";
---

<Tooltip
  html="<p class='flex-shrink-0 block text-xs whitespace-nowrap'>This is HTML content, be careful of what you pass here.</p>"
>
  <Badge text="Hover me !" />
</Tooltip>

Tooltip as Component

Even better, you can pass an astro component to tooltip with component props.

PS: text props has priority to html props which has priority to component props.

I was made for TooltipWithComponentExample

Display Dummy Content !

Copied !

---
import Badge from "$components/badge/Badge.astro";
import Tooltip from "$components/tooltip/Tooltip.astro";
import TooltipDummyComponent from "$views/examples/tooltips/TooltipDummyComponent.astro";
---

<Tooltip
  triggerOnHover={false}
  component={TooltipDummyComponent}
  position="bottom"
>
  <Badge x-bind="toggle" text="Display Dummy Content !" />
</Tooltip>

Custom Tooltip Trigger

By default, tooltip message is triggered by hovering content. With triggerOnHover props, you can disable this mechanism and trigger tooltip in your own way.

Below is an example with a trigger on click.

By the way, the copy button in code side is a tooltip triggering by click.

I'm a tooltip triggering by click

Copied !

---
import SecondaryButton from "$components/button/secondary/SecondaryButton.astro";
import Tooltip from "$components/tooltip/Tooltip.astro";
---

<Tooltip
  text="I'm a tooltip triggering by click"
  size="md"
  triggerOnHover={false}
>
  <SecondaryButton
    @click="visible = !visible"
    text="Click Me to show Tooltip message"
    borderRadius="arc"
  />
</Tooltip>