Tooltip
On this page
On this page
Tooltip
Default tooltip wrapping a button with content in the content slot.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';<rh-tooltip>
<rh-button>Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tooltip>
<Button>Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
);Bottom
Tooltip positioned below the invoking element using position=bottom.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="bottom">
<rh-button>Bottom Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="bottom">
<Button>Bottom Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</div>
);Color Context
Tooltip adapting to different color contexts using rh-context-demo.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';<rh-context-demo>
<rh-tooltip>
<rh-button>Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</rh-context-demo>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo>
<Tooltip>
<Button>Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</ContextDemo>
);Content Attributes
Tooltip using the content attribute instead of the content slot.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';<rh-tooltip content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.">
<rh-button>Tooltip</rh-button>
</rh-tooltip>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tooltip content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.">
<Button>Tooltip</Button>
</Tooltip>
);Dense Ui
Multiple tooltips in a dense layout, each using the content attribute.
Edit element properties
.dense {
display: grid;
place-items: center;
gap: var(--rh-space-md, 8px);
padding: var(--rh-space-lg, 16px);
background: light-dark(var(--rh-color-surface-light, #e0e0e0), var(--rh-color-surface-dark, #383838));
inline-size: var(--rh-length-6xl, 96px);
rh-button::part(button) {
min-inline-size: var(--rh-length-3xl, 48px);
}
}import "@rhds/elements/rh-tooltip/rh-tooltip.js";
import "@rhds/elements/rh-button/rh-button.js";<div class="dense">
<rh-tooltip content="Tooltip 1"><rh-button>1</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 2"><rh-button>2</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 3"><rh-button>3</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 4"><rh-button>4</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 5"><rh-button>5</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 6"><rh-button>6</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 7"><rh-button>7</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 8"><rh-button>8</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 9"><rh-button>9</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 10"><rh-button>10</rh-button></rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="dense">
<Tooltip content="Tooltip 1">
<Button>1</Button>
</Tooltip>
<Tooltip content="Tooltip 2">
<Button>2</Button>
</Tooltip>
<Tooltip content="Tooltip 3">
<Button>3</Button>
</Tooltip>
<Tooltip content="Tooltip 4">
<Button>4</Button>
</Tooltip>
<Tooltip content="Tooltip 5">
<Button>5</Button>
</Tooltip>
<Tooltip content="Tooltip 6">
<Button>6</Button>
</Tooltip>
<Tooltip content="Tooltip 7">
<Button>7</Button>
</Tooltip>
<Tooltip content="Tooltip 8">
<Button>8</Button>
</Tooltip>
<Tooltip content="Tooltip 9">
<Button>9</Button>
</Tooltip>
<Tooltip content="Tooltip 10">
<Button>10</Button>
</Tooltip>
</div>
);Left
Tooltip positioned to the left of the invoking element using position=left.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="left">
<rh-button>Left Tooltip</rh-button>
<span slot="content">Some tooltip content</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="left">
<Button>Left Tooltip</Button>
<span slot="content">Some tooltip content</span>
</Tooltip>
</div>
);Right
Tooltip positioned to the right of the invoking element using position=right.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="right">
<rh-button>Right Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="right">
<Button>Right Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</div>
);Rtl
Tooltip with right-to-left text direction using Hebrew content.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
text-align: right;
}
rh-tooltip + rh-tooltip {
margin-inline-start: var(--rh-space-2xl, 32px);
}<div class="tooltip-container" dir="rtl" lang="he">
<rh-tooltip position="right">
<rh-button>עם ישראל חי</rh-button>
<span slot="content">
בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית. </span>
</rh-tooltip>
<rh-tooltip position="left">
<rh-button>עם ישראל חי</rh-button>
<span slot="content">
בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית. </span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container" dir="rtl" lang="he">
<Tooltip position="right">
<Button>עם ישראל חי</Button>
<span slot="content">בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית.</span>
</Tooltip>
<Tooltip position="left">
<Button>עם ישראל חי</Button>
<span slot="content">בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית.</span>
</Tooltip>
</div>
);Silent
Silent tooltip that suppresses screen reader announcements, relying on an accessible label instead.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
import '@rhds/elements/rh-icon/rh-icon.js';rh-button {
margin-inline-start: var(--rh-space-3xl, 48px);
}
p {
margin-block-end: var(--rh-space-2xl, 32px);
}<p>Adding the <code>silent</code> attribute makes <code><rh-tooltip></code>’s tooltip content inaccessible. Only use when providing another means of accessibility for content in the <code>content</code> slot.</p>
<rh-tooltip silent="">
<rh-button variant="secondary">
<rh-icon set="ui" icon="copy" accessible-label="Copy to Clipboard"></rh-icon>
</rh-button>
<span slot="content">Copy to Clipboard</span>
</rh-tooltip>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<p>
Adding the
<code>silent</code>
attribute makes
<code><rh-tooltip></code>
’s tooltip content inaccessible. Only use when providing another means of accessibility for content in the
<code>content</code>
slot.
</p>
<Tooltip silent>
<Button variant="secondary">
<Icon set="ui" icon="copy" accessible-label="Copy to Clipboard" />
</Button>
<span slot="content">Copy to Clipboard</span>
</Tooltip>
);
Top
Tooltip positioned above the invoking element using position=top.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="top">
<rh-button>Top Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="top">
<Button>Top Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</div>
);Tooltip
Default tooltip wrapping a button with content in the content slot.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';<rh-tooltip>
<rh-button>Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tooltip>
<Button>Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
);Bottom
Tooltip positioned below the invoking element using position=bottom.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="bottom">
<rh-button>Bottom Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="bottom">
<Button>Bottom Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</div>
);Color Context
Tooltip adapting to different color contexts using rh-context-demo.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';<rh-context-demo>
<rh-tooltip>
<rh-button>Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</rh-context-demo>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo>
<Tooltip>
<Button>Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</ContextDemo>
);Content Attributes
Tooltip using the content attribute instead of the content slot.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';<rh-tooltip content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.">
<rh-button>Tooltip</rh-button>
</rh-tooltip>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tooltip content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.">
<Button>Tooltip</Button>
</Tooltip>
);Dense Ui
Multiple tooltips in a dense layout, each using the content attribute.
Edit element properties
.dense {
display: grid;
place-items: center;
gap: var(--rh-space-md, 8px);
padding: var(--rh-space-lg, 16px);
background: light-dark(var(--rh-color-surface-light, #e0e0e0), var(--rh-color-surface-dark, #383838));
inline-size: var(--rh-length-6xl, 96px);
rh-button::part(button) {
min-inline-size: var(--rh-length-3xl, 48px);
}
}import "@rhds/elements/rh-tooltip/rh-tooltip.js";
import "@rhds/elements/rh-button/rh-button.js";<div class="dense">
<rh-tooltip content="Tooltip 1"><rh-button>1</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 2"><rh-button>2</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 3"><rh-button>3</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 4"><rh-button>4</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 5"><rh-button>5</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 6"><rh-button>6</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 7"><rh-button>7</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 8"><rh-button>8</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 9"><rh-button>9</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 10"><rh-button>10</rh-button></rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="dense">
<Tooltip content="Tooltip 1">
<Button>1</Button>
</Tooltip>
<Tooltip content="Tooltip 2">
<Button>2</Button>
</Tooltip>
<Tooltip content="Tooltip 3">
<Button>3</Button>
</Tooltip>
<Tooltip content="Tooltip 4">
<Button>4</Button>
</Tooltip>
<Tooltip content="Tooltip 5">
<Button>5</Button>
</Tooltip>
<Tooltip content="Tooltip 6">
<Button>6</Button>
</Tooltip>
<Tooltip content="Tooltip 7">
<Button>7</Button>
</Tooltip>
<Tooltip content="Tooltip 8">
<Button>8</Button>
</Tooltip>
<Tooltip content="Tooltip 9">
<Button>9</Button>
</Tooltip>
<Tooltip content="Tooltip 10">
<Button>10</Button>
</Tooltip>
</div>
);Left
Tooltip positioned to the left of the invoking element using position=left.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="left">
<rh-button>Left Tooltip</rh-button>
<span slot="content">Some tooltip content</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="left">
<Button>Left Tooltip</Button>
<span slot="content">Some tooltip content</span>
</Tooltip>
</div>
);Right
Tooltip positioned to the right of the invoking element using position=right.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="right">
<rh-button>Right Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="right">
<Button>Right Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</div>
);Rtl
Tooltip with right-to-left text direction using Hebrew content.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
text-align: right;
}
rh-tooltip + rh-tooltip {
margin-inline-start: var(--rh-space-2xl, 32px);
}<div class="tooltip-container" dir="rtl" lang="he">
<rh-tooltip position="right">
<rh-button>עם ישראל חי</rh-button>
<span slot="content">
בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית. </span>
</rh-tooltip>
<rh-tooltip position="left">
<rh-button>עם ישראל חי</rh-button>
<span slot="content">
בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית. </span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container" dir="rtl" lang="he">
<Tooltip position="right">
<Button>עם ישראל חי</Button>
<span slot="content">בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית.</span>
</Tooltip>
<Tooltip position="left">
<Button>עם ישראל חי</Button>
<span slot="content">בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית.</span>
</Tooltip>
</div>
);Silent
Silent tooltip that suppresses screen reader announcements, relying on an accessible label instead.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
import '@rhds/elements/rh-icon/rh-icon.js';rh-button {
margin-inline-start: var(--rh-space-3xl, 48px);
}
p {
margin-block-end: var(--rh-space-2xl, 32px);
}<p>Adding the <code>silent</code> attribute makes <code><rh-tooltip></code>’s tooltip content inaccessible. Only use when providing another means of accessibility for content in the <code>content</code> slot.</p>
<rh-tooltip silent="">
<rh-button variant="secondary">
<rh-icon set="ui" icon="copy" accessible-label="Copy to Clipboard"></rh-icon>
</rh-button>
<span slot="content">Copy to Clipboard</span>
</rh-tooltip>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<p>
Adding the
<code>silent</code>
attribute makes
<code><rh-tooltip></code>
’s tooltip content inaccessible. Only use when providing another means of accessibility for content in the
<code>content</code>
slot.
</p>
<Tooltip silent>
<Button variant="secondary">
<Icon set="ui" icon="copy" accessible-label="Copy to Clipboard" />
</Button>
<span slot="content">Copy to Clipboard</span>
</Tooltip>
);
Top
Tooltip positioned above the invoking element using position=top.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="top">
<rh-button>Top Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="top">
<Button>Top Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</div>
);Tooltip
Default tooltip wrapping a button with content in the content slot.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';<rh-tooltip>
<rh-button>Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tooltip>
<Button>Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
);Bottom
Tooltip positioned below the invoking element using position=bottom.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="bottom">
<rh-button>Bottom Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="bottom">
<Button>Bottom Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</div>
);Color Context
Tooltip adapting to different color contexts using rh-context-demo.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';<rh-context-demo>
<rh-tooltip>
<rh-button>Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</rh-context-demo>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo>
<Tooltip>
<Button>Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</ContextDemo>
);Content Attributes
Tooltip using the content attribute instead of the content slot.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';<rh-tooltip content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.">
<rh-button>Tooltip</rh-button>
</rh-tooltip>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tooltip content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.">
<Button>Tooltip</Button>
</Tooltip>
);Dense Ui
Multiple tooltips in a dense layout, each using the content attribute.
Edit element properties
.dense {
display: grid;
place-items: center;
gap: var(--rh-space-md, 8px);
padding: var(--rh-space-lg, 16px);
background: light-dark(var(--rh-color-surface-light, #e0e0e0), var(--rh-color-surface-dark, #383838));
inline-size: var(--rh-length-6xl, 96px);
rh-button::part(button) {
min-inline-size: var(--rh-length-3xl, 48px);
}
}import "@rhds/elements/rh-tooltip/rh-tooltip.js";
import "@rhds/elements/rh-button/rh-button.js";<div class="dense">
<rh-tooltip content="Tooltip 1"><rh-button>1</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 2"><rh-button>2</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 3"><rh-button>3</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 4"><rh-button>4</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 5"><rh-button>5</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 6"><rh-button>6</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 7"><rh-button>7</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 8"><rh-button>8</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 9"><rh-button>9</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 10"><rh-button>10</rh-button></rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="dense">
<Tooltip content="Tooltip 1">
<Button>1</Button>
</Tooltip>
<Tooltip content="Tooltip 2">
<Button>2</Button>
</Tooltip>
<Tooltip content="Tooltip 3">
<Button>3</Button>
</Tooltip>
<Tooltip content="Tooltip 4">
<Button>4</Button>
</Tooltip>
<Tooltip content="Tooltip 5">
<Button>5</Button>
</Tooltip>
<Tooltip content="Tooltip 6">
<Button>6</Button>
</Tooltip>
<Tooltip content="Tooltip 7">
<Button>7</Button>
</Tooltip>
<Tooltip content="Tooltip 8">
<Button>8</Button>
</Tooltip>
<Tooltip content="Tooltip 9">
<Button>9</Button>
</Tooltip>
<Tooltip content="Tooltip 10">
<Button>10</Button>
</Tooltip>
</div>
);Left
Tooltip positioned to the left of the invoking element using position=left.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="left">
<rh-button>Left Tooltip</rh-button>
<span slot="content">Some tooltip content</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="left">
<Button>Left Tooltip</Button>
<span slot="content">Some tooltip content</span>
</Tooltip>
</div>
);Right
Tooltip positioned to the right of the invoking element using position=right.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="right">
<rh-button>Right Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="right">
<Button>Right Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</div>
);Rtl
Tooltip with right-to-left text direction using Hebrew content.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
text-align: right;
}
rh-tooltip + rh-tooltip {
margin-inline-start: var(--rh-space-2xl, 32px);
}<div class="tooltip-container" dir="rtl" lang="he">
<rh-tooltip position="right">
<rh-button>עם ישראל חי</rh-button>
<span slot="content">
בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית. </span>
</rh-tooltip>
<rh-tooltip position="left">
<rh-button>עם ישראל חי</rh-button>
<span slot="content">
בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית. </span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container" dir="rtl" lang="he">
<Tooltip position="right">
<Button>עם ישראל חי</Button>
<span slot="content">בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית.</span>
</Tooltip>
<Tooltip position="left">
<Button>עם ישראל חי</Button>
<span slot="content">בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית.</span>
</Tooltip>
</div>
);Silent
Silent tooltip that suppresses screen reader announcements, relying on an accessible label instead.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
import '@rhds/elements/rh-icon/rh-icon.js';rh-button {
margin-inline-start: var(--rh-space-3xl, 48px);
}
p {
margin-block-end: var(--rh-space-2xl, 32px);
}<p>Adding the <code>silent</code> attribute makes <code><rh-tooltip></code>’s tooltip content inaccessible. Only use when providing another means of accessibility for content in the <code>content</code> slot.</p>
<rh-tooltip silent="">
<rh-button variant="secondary">
<rh-icon set="ui" icon="copy" accessible-label="Copy to Clipboard"></rh-icon>
</rh-button>
<span slot="content">Copy to Clipboard</span>
</rh-tooltip>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<p>
Adding the
<code>silent</code>
attribute makes
<code><rh-tooltip></code>
’s tooltip content inaccessible. Only use when providing another means of accessibility for content in the
<code>content</code>
slot.
</p>
<Tooltip silent>
<Button variant="secondary">
<Icon set="ui" icon="copy" accessible-label="Copy to Clipboard" />
</Button>
<span slot="content">Copy to Clipboard</span>
</Tooltip>
);
Top
Tooltip positioned above the invoking element using position=top.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="top">
<rh-button>Top Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="top">
<Button>Top Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</div>
);Tooltip
Default tooltip wrapping a button with content in the content slot.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';<rh-tooltip>
<rh-button>Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tooltip>
<Button>Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
);Bottom
Tooltip positioned below the invoking element using position=bottom.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="bottom">
<rh-button>Bottom Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="bottom">
<Button>Bottom Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</div>
);Color Context
Tooltip adapting to different color contexts using rh-context-demo.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';<rh-context-demo>
<rh-tooltip>
<rh-button>Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</rh-context-demo>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo>
<Tooltip>
<Button>Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</ContextDemo>
);Content Attributes
Tooltip using the content attribute instead of the content slot.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';<rh-tooltip content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.">
<rh-button>Tooltip</rh-button>
</rh-tooltip>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tooltip content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.">
<Button>Tooltip</Button>
</Tooltip>
);Dense Ui
Multiple tooltips in a dense layout, each using the content attribute.
Edit element properties
.dense {
display: grid;
place-items: center;
gap: var(--rh-space-md, 8px);
padding: var(--rh-space-lg, 16px);
background: light-dark(var(--rh-color-surface-light, #e0e0e0), var(--rh-color-surface-dark, #383838));
inline-size: var(--rh-length-6xl, 96px);
rh-button::part(button) {
min-inline-size: var(--rh-length-3xl, 48px);
}
}import "@rhds/elements/rh-tooltip/rh-tooltip.js";
import "@rhds/elements/rh-button/rh-button.js";<div class="dense">
<rh-tooltip content="Tooltip 1"><rh-button>1</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 2"><rh-button>2</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 3"><rh-button>3</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 4"><rh-button>4</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 5"><rh-button>5</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 6"><rh-button>6</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 7"><rh-button>7</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 8"><rh-button>8</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 9"><rh-button>9</rh-button></rh-tooltip>
<rh-tooltip content="Tooltip 10"><rh-button>10</rh-button></rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="dense">
<Tooltip content="Tooltip 1">
<Button>1</Button>
</Tooltip>
<Tooltip content="Tooltip 2">
<Button>2</Button>
</Tooltip>
<Tooltip content="Tooltip 3">
<Button>3</Button>
</Tooltip>
<Tooltip content="Tooltip 4">
<Button>4</Button>
</Tooltip>
<Tooltip content="Tooltip 5">
<Button>5</Button>
</Tooltip>
<Tooltip content="Tooltip 6">
<Button>6</Button>
</Tooltip>
<Tooltip content="Tooltip 7">
<Button>7</Button>
</Tooltip>
<Tooltip content="Tooltip 8">
<Button>8</Button>
</Tooltip>
<Tooltip content="Tooltip 9">
<Button>9</Button>
</Tooltip>
<Tooltip content="Tooltip 10">
<Button>10</Button>
</Tooltip>
</div>
);Left
Tooltip positioned to the left of the invoking element using position=left.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="left">
<rh-button>Left Tooltip</rh-button>
<span slot="content">Some tooltip content</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="left">
<Button>Left Tooltip</Button>
<span slot="content">Some tooltip content</span>
</Tooltip>
</div>
);Right
Tooltip positioned to the right of the invoking element using position=right.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="right">
<rh-button>Right Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="right">
<Button>Right Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</div>
);Rtl
Tooltip with right-to-left text direction using Hebrew content.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
text-align: right;
}
rh-tooltip + rh-tooltip {
margin-inline-start: var(--rh-space-2xl, 32px);
}<div class="tooltip-container" dir="rtl" lang="he">
<rh-tooltip position="right">
<rh-button>עם ישראל חי</rh-button>
<span slot="content">
בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית. </span>
</rh-tooltip>
<rh-tooltip position="left">
<rh-button>עם ישראל חי</rh-button>
<span slot="content">
בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית. </span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container" dir="rtl" lang="he">
<Tooltip position="right">
<Button>עם ישראל חי</Button>
<span slot="content">בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית.</span>
</Tooltip>
<Tooltip position="left">
<Button>עם ישראל חי</Button>
<span slot="content">בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית.</span>
</Tooltip>
</div>
);Silent
Silent tooltip that suppresses screen reader announcements, relying on an accessible label instead.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
import '@rhds/elements/rh-icon/rh-icon.js';rh-button {
margin-inline-start: var(--rh-space-3xl, 48px);
}
p {
margin-block-end: var(--rh-space-2xl, 32px);
}<p>Adding the <code>silent</code> attribute makes <code><rh-tooltip></code>’s tooltip content inaccessible. Only use when providing another means of accessibility for content in the <code>content</code> slot.</p>
<rh-tooltip silent="">
<rh-button variant="secondary">
<rh-icon set="ui" icon="copy" accessible-label="Copy to Clipboard"></rh-icon>
</rh-button>
<span slot="content">Copy to Clipboard</span>
</rh-tooltip>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<p>
Adding the
<code>silent</code>
attribute makes
<code><rh-tooltip></code>
’s tooltip content inaccessible. Only use when providing another means of accessibility for content in the
<code>content</code>
slot.
</p>
<Tooltip silent>
<Button variant="secondary">
<Icon set="ui" icon="copy" accessible-label="Copy to Clipboard" />
</Button>
<span slot="content">Copy to Clipboard</span>
</Tooltip>
);
Top
Tooltip positioned above the invoking element using position=top.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';.tooltip-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}<div class="tooltip-container">
<rh-tooltip position="top">
<rh-button>Top Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
</div>import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<div className="tooltip-container">
<Tooltip position="top">
<Button>Top Tooltip</Button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</Tooltip>
</div>
);Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
