basecoat/docs/src/components/tooltip.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Tooltip	A popup that displays information related to an element when the mouse hovers over it.	label id Usage usage label id children Examples examples label id Default example-default label id Sides example-sides label id Icon Button example-icon-button label id Disabled Button example-disabled-button label id Link example-link label id RTL example-rtl

{% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %}

{% set code %}Hover{% endset %} {{ code_preview("tooltip", code) }}

Usage

Add data-tooltip to the trigger element. Use data-side and data-align to change the position.

Basecoat tooltips are CSS-only and text-only. This intentionally differs from shadcn/ui's composed tooltip content, which can render arbitrary markup and uses a portal.

{% set code %}Bottom{% endset %} {{ code_block(code | prettyHtml, "html") }}

data-tooltip

Tooltip text.

data-side Optional

top, bottom, left, right, inline-start, or inline-end. Defaults to top.

data-align Optional

start, center, or end. Defaults to center.

Examples

Default

{% set code %}Default{% endset %} {{ code_preview("tooltip-default", code) }}

Sides

{% set code %}

Inline Start Top Bottom Inline End

{% endset %} {{ code_preview("tooltip-sides", code) }}

Icon Button

{% set code %} {% lucide "info" %} Info {% endset %} {{ code_preview("tooltip-icon-button", code) }}

Disabled Button

{% set code %} Disabled {% endset %} {{ code_preview("tooltip-disabled-button", code) }}

Link

{% set code %}Learn more{% endset %} {{ code_preview("tooltip-link", code) }}

RTL

{% set code %}

Inline Start Inline End

{% endset %} {{ code_preview("tooltip-rtl", code) }}