labb 0.5.0 is out
UI

Tooltip

<c-lb.tooltip /> Markdown

Tooltip component for Django: add contextual hints and hover descriptions. Built with django-cotton, Tailwind CSS, and daisyUI 5. Zero JavaScript by default.

Tooltip adds a CSS-driven hover label to any element, with no JavaScript required. Position it above, below, left, or right of the trigger, and set the tip prop for the label text.

Basic Tooltip

<c-lb.tooltip tip="Hello!">
  <c-lb.button>Hover me</c-lb.button>
</c-lb.tooltip>

Placements

<div class="flex flex-wrap gap-4 p-8">
  <c-lb.tooltip tip="Top" placement="top">
    <c-lb.button>Top</c-lb.button>
  </c-lb.tooltip>
  <c-lb.tooltip tip="Bottom" placement="bottom">
    <c-lb.button>Bottom</c-lb.button>
  </c-lb.tooltip>
  <c-lb.tooltip tip="Left" placement="left">
    <c-lb.button>Left</c-lb.button>
  </c-lb.tooltip>
  <c-lb.tooltip tip="Right" placement="right">
    <c-lb.button>Right</c-lb.button>
  </c-lb.tooltip>
</div>

Alignment

Align the tooltip along its placement edge with align="start|center|end" (center is the default). 

<div class="flex flex-wrap gap-4 p-8">
  <c-lb.tooltip tip="Start" placement="top" align="start" open>
    <c-lb.button>Start</c-lb.button>
  </c-lb.tooltip>
  <c-lb.tooltip tip="Center" placement="top" align="center" open>
    <c-lb.button>Center</c-lb.button>
  </c-lb.tooltip>
  <c-lb.tooltip tip="End" placement="top" align="end" open>
    <c-lb.button>End</c-lb.button>
  </c-lb.tooltip>
</div>

Color Variants

<div class="flex flex-wrap gap-x-4 gap-y-12 p-8">
  <c-lb.tooltip tip="Neutral" variant="neutral" open>
    <c-lb.button>Neutral</c-lb.button>
  </c-lb.tooltip>
  <c-lb.tooltip tip="Primary" variant="primary" open>
    <c-lb.button variant="primary">Primary</c-lb.button>
  </c-lb.tooltip>
  <c-lb.tooltip tip="Secondary" variant="secondary" open>
    <c-lb.button variant="secondary">Secondary</c-lb.button>
  </c-lb.tooltip>
  <c-lb.tooltip tip="Accent" variant="accent" open>
    <c-lb.button variant="accent">Accent</c-lb.button>
  </c-lb.tooltip>
  <c-lb.tooltip tip="Info" variant="info" open>
    <c-lb.button variant="info">Info</c-lb.button>
  </c-lb.tooltip>
  <c-lb.tooltip tip="Success" variant="success" open>
    <c-lb.button variant="success">Success</c-lb.button>
  </c-lb.tooltip>
  <c-lb.tooltip tip="Warning" variant="warning" open>
    <c-lb.button variant="warning">Warning</c-lb.button>
  </c-lb.tooltip>
  <c-lb.tooltip tip="Error" variant="error" open>
    <c-lb.button variant="error">Error</c-lb.button>
  </c-lb.tooltip>
</div>

Force Open

<c-lb.tooltip tip="I'm always visible" variant="primary" open>
  <c-lb.button variant="primary">Force Open</c-lb.button>
</c-lb.tooltip>

API Reference

c-lb.tooltip

Property Type Default Required Description
class string - No Additional CSS classes to apply
tip string - No Tooltip text (sets data-tip attribute)
placement
top bottom left right
top No Tooltip position
align
start center end
- No Align the tooltip along its placement edge (default is centered)
variant
neutral primary secondary accent info success warning error
- No Tooltip color variant
open boolean False No Force tooltip to stay open
Slot Name Description
default Element that triggers the tooltip on hover

c-lb.tooltip.content

Property Type Default Required Description
class string - No Additional CSS classes to apply
Slot Name Description
default Custom tooltip HTML content
Prev Toast
Next Checkbox