Live Storybook - Tooltip

Tooltip

Storybook
- Alert
- App Shell
- Avatar
- Badge
- Badges
- Button
- Card
- Dropdown
- Dropdown Live
- Flash
- Horiz
- Icon
- Icon Gallery
- Input
- Scale
- Select Filter
- Spinner
- Stepper
- Table
- Tabs
- Tooltip
- Live tabs
- Styleguide
- Usage
- Widget usage

Tooltip

Stories Playground Source

Default Open in playground

Trigger Text tooltip-default

<.tooltip id="tooltip-single-default">
  Trigger Text
</.tooltip>

Tooltip text Open in playground

Boom Kaboom

<.tooltip id="tooltip-single-tooltip-text" text="Kaboom">
  Boom
</.tooltip>

Tooltip content markup Open in playground

Trigger Text with markup

<.tooltip id="tooltip-single-tooltip-content-markup">
  Trigger
  <:content><i class='text-bd-red-800'>Text with markup</i></:content>
</.tooltip>

Dark style Open in playground

Dark This tooltip has dark BG

<.tooltip id="tooltip-single-dark-style" style="dark" text="This tooltip has dark BG">
  Dark
</.tooltip>

Custom trigger Open in playground

Archive

<.tooltip id="tooltip-single-custom-trigger" text="Archive">
  <.button icon="hero-archive-box" />
</.tooltip>

Changed placement Open in playground

Bottom Showing on bottom

<.tooltip id="tooltip-single-changed-placement" place="bottom" text="Showing on bottom">
  Bottom
</.tooltip>

Trigger action Open in playground

ClickMe Click Outside to Close

<.tooltip id="tooltip-single-trigger-action" text="Click Outside to Close" trigger="click">
  ClickMe
</.tooltip>

Disable arrow Open in playground

Hover Without Arrow

<.tooltip arrow="false" id="tooltip-single-disable-arrow" style="dark" text="Without Arrow">
  Hover
</.tooltip>