DocsComponentsTooltip

Tooltip

A hint shown on hover and focus, in CSS only.

1 file

Installation

pyblade-ui add tooltip

Copy this file into your project

components/ui/tooltip.html

@props({'text': '', 'side': 'top'})
<span data-slot="tooltip" class="group/tooltip relative inline-flex">
  {{ slot }}
  <span role="tooltip" {{ attributes.cn(
      "pointer-events-none absolute z-50 w-max max-w-xs rounded-md bg-foreground px-3 py-1.5 text-xs text-background opacity-0 transition-opacity group-hover/tooltip:opacity-100 group-focus-within/tooltip:opacity-100",
      {
          'top': 'bottom-full left-1/2 mb-2 -translate-x-1/2',
          'bottom': 'top-full left-1/2 mt-2 -translate-x-1/2',
          'left': 'right-full top-1/2 mr-2 -translate-y-1/2',
          'right': 'left-full top-1/2 ml-2 -translate-y-1/2',
      }[side],
  ) }}>{{ text }}</span>
</span>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.tooltip> is available in all your templates.

<pb-ui.tooltip text="Add to library"><pb-ui.button variant="outline">Hover</pb-ui.button></pb-ui.tooltip>

Examples

Sides

<div class="flex flex-wrap gap-2">
  <pb-ui.tooltip text="On top" side="top"><pb-ui.button variant="outline" size="sm">Top</pb-ui.button></pb-ui.tooltip>
  <pb-ui.tooltip text="On the right" side="right"><pb-ui.button variant="outline" size="sm">Right</pb-ui.button></pb-ui.tooltip>
  <pb-ui.tooltip text="On the bottom" side="bottom"><pb-ui.button variant="outline" size="sm">Bottom</pb-ui.button></pb-ui.tooltip>
  <pb-ui.tooltip text="On the left" side="left"><pb-ui.button variant="outline" size="sm">Left</pb-ui.button></pb-ui.tooltip>
</div>

Props

Prop	Default
text	''
side	'top'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Hover card Toaster ›