Tooltip

Informative text that appears when hovering over an element

Basic

Preview Code Auto

Div(
    Button('Hover me', cls='btn'),
    data_tip='hello',
    cls='tooltip'
)

Permanently visible tooltip

Preview Code Auto

Div(
    Button('Force open', cls='btn'),
    data_tip='hello',
    cls='tooltip tooltip-open'
)

Only show tooltip on large screens

Preview Code Auto

Div(
    Button('Hover me', cls='btn'),
    data_tip='hello',
    cls='lg:tooltip'
)

Preview Code Auto

Div(
    Button('Primary', cls='btn btn-primary'),
    data_tip='Primary',
    cls='tooltip tooltip-open tooltip-primary'
)

Preview Code Auto

Div(
    Button('Secondary', cls='btn btn-secondary'),
    data_tip='Secondary',
    cls='tooltip tooltip-open tooltip-secondary'
)

Preview Code Auto

Div(
    Button('Accent', cls='btn btn-accent'),
    data_tip='Accent',
    cls='tooltip tooltip-open tooltip-accent'
)

Preview Code Auto

Div(
    Button('Info', cls='btn btn-info'),
    data_tip='Info',
    cls='tooltip tooltip-open tooltip-info'
)

Preview Code Auto

Div(
    Button('Success', cls='btn btn-success'),
    data_tip='Success',
    cls='tooltip tooltip-open tooltip-success'
)

Preview Code Auto

Div(
    Button('Warning', cls='btn btn-warning'),
    data_tip='Warning',
    cls='tooltip tooltip-open tooltip-warning'
)

Preview Code Auto

Div(
    Button('Error', cls='btn btn-error'),
    data_tip='Error',
    cls='tooltip tooltip-open tooltip-error'
)

Class	Type	Description
tooltip	Component	Container element
tooltip-content	Part	Optional. Setting a div as the content of the tooltip instead of the `data-tip` text
tooltip-top	Placement	Put tooltip on top [Default]
tooltip-bottom	Position below element
tooltip-left	Placement	Put tooltip on left
tooltip-right	Placement	Put tooltip on right
tooltip-open	Modifier	Force open tooltip
tooltip-neutral	Color	Neutral color
tooltip-primary	Color	Primary color
tooltip-secondary	Color	Secondary color
tooltip-accent	Color	Accent color
tooltip-info	Color	Info color
tooltip-success	Color	Success color
tooltip-warning	Color	Warning color
tooltip-error	Color	Error color

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo