Tooltip

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 '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';

<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>

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 '@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 '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';

<p>
  In order to demonstrate a left-positioned tooltip, we'll use a right-to-left language
</p>

<p lang="he" dir="rtl" style="text-align: right;">
  <rh-tooltip position="left">
    <rh-button>עם ישראל חי</rh-button>
    <span slot="content">
  בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי.
  לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית. </span>
  </rh-tooltip>
</p>

import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';

<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>

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>&lt;rh-tooltip&gt;</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 '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';

rh-tooltip {
  margin: 7rem 0;
  display: inline-block;
}

<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>