mirror of
https://github.com/onsonr/nebula.git
synced 2025-03-11 01:39:11 +00:00
2033 lines
143 KiB
HTML
2033 lines
143 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-layout="component" data-shoelace-version="0.0.10">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="description" content="Tooltips display additional information based on a specific action." />
|
||
<title>Tooltip</title>
|
||
|
||
<meta name="turbo-cache-control" />
|
||
|
||
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
||
<link rel="stylesheet" href="/assets/styles/code-previews.css" />
|
||
<link rel="stylesheet" href="/assets/styles/search.css" />
|
||
|
||
<link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
|
||
|
||
<meta name="twitter:card" content="summary" />
|
||
<meta name="twitter:creator" content="shoelace_style" />
|
||
<meta name="twitter:image" content="https://nebulaui.org/assets/images/og-image.png" />
|
||
|
||
<meta property="og:url" content="https://nebulaui.org/components/tooltip/" />
|
||
<meta property="og:title" content="Tooltip" />
|
||
<meta property="og:description" content="Tooltips display additional information based on a specific action." />
|
||
<meta property="og:image" content="https://nebulaui.org/assets/images/og-image.png" />
|
||
|
||
<link rel="stylesheet" href="/dist/themes/light.css" />
|
||
<link rel="stylesheet" href="/dist/themes/dark.css" />
|
||
<script type="module" src="/dist/shoelace-autoloader.js"></script>
|
||
|
||
<script>
|
||
(() => {
|
||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||
const theme = localStorage.getItem('theme') || 'auto';
|
||
document.documentElement.classList.toggle(
|
||
'sl-theme-dark',
|
||
theme === 'dark' || (theme === 'auto' && prefersDark)
|
||
);
|
||
})();
|
||
</script>
|
||
|
||
<script src="/assets/scripts/turbo.js" type="module"></script>
|
||
<script src="/assets/scripts/docs.js" defer=""></script>
|
||
<script src="/assets/scripts/code-previews.js" defer=""></script>
|
||
<script src="/assets/scripts/lunr.js" defer=""></script>
|
||
<script src="/assets/scripts/search.js" defer=""></script>
|
||
</head>
|
||
<body>
|
||
<a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
|
||
Skip to main content
|
||
</a>
|
||
|
||
<button id="menu-toggle" type="button" aria-label="Menu">
|
||
<svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
||
<path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
|
||
</g>
|
||
</svg>
|
||
</button>
|
||
|
||
<div id="icon-toolbar">
|
||
<a
|
||
href="https://github.com/onsonr/nebula"
|
||
title="View Nebula on GitHub"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
<sl-icon name="github"></sl-icon>
|
||
</a>
|
||
|
||
<a
|
||
href="https://twitter.com/shoelace_style"
|
||
title="Follow Nebula on Twitter"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
<sl-icon name="twitter"></sl-icon>
|
||
</a>
|
||
|
||
<sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
|
||
<sl-button slot="trigger" size="small" variant="text" caret="" title="Press \ to toggle">
|
||
<sl-icon class="only-light" name="sun-fill"></sl-icon>
|
||
<sl-icon class="only-dark" name="moon-fill"></sl-icon>
|
||
</sl-button>
|
||
<sl-menu>
|
||
<sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
|
||
<sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
|
||
<sl-divider></sl-divider>
|
||
<sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
|
||
</sl-menu>
|
||
</sl-dropdown>
|
||
</div>
|
||
|
||
<aside id="sidebar" data-preserve-scroll="">
|
||
<header>
|
||
<a href="/">
|
||
<img src="/assets/images/wordmark.svg" alt="Nebula" />
|
||
</a>
|
||
<div class="sidebar-version">0.0.10</div>
|
||
</header>
|
||
|
||
<div class="sidebar-buttons">
|
||
<sl-button
|
||
size="small"
|
||
class="repo-button repo-button--github"
|
||
href="https://github.com/onsonr/nebula"
|
||
target="_blank"
|
||
>
|
||
<sl-icon slot="prefix" name="github"></sl-icon> Code
|
||
</sl-button>
|
||
<sl-button
|
||
size="small"
|
||
class="repo-button repo-button--star"
|
||
href="https://github.com/onsonr/nebula/stargazers"
|
||
target="_blank"
|
||
>
|
||
<sl-icon slot="prefix" name="star-fill"></sl-icon> Star
|
||
</sl-button>
|
||
<sl-button
|
||
size="small"
|
||
class="repo-button repo-button--twitter"
|
||
href="https://twitter.com/shoelace_style"
|
||
target="_blank"
|
||
>
|
||
<sl-icon slot="prefix" name="twitter"></sl-icon> Follow
|
||
</sl-button>
|
||
</div>
|
||
|
||
<button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
|
||
<sl-icon name="search"></sl-icon>
|
||
<span>Search</span>
|
||
</button>
|
||
|
||
<nav>
|
||
<ul>
|
||
<li>
|
||
<h2>Getting Started</h2>
|
||
<ul>
|
||
<li><a href="/">Home</a></li>
|
||
<li><a href="/getting-started/installation">Installation</a></li>
|
||
<li><a href="/getting-started/usage">Usage</a></li>
|
||
<li><a href="/getting-started/themes">Themes</a></li>
|
||
<li><a href="/getting-started/customizing">Customizing</a></li>
|
||
<li><a href="/getting-started/form-controls">Form Controls</a></li>
|
||
<li><a href="/getting-started/localization">Localization</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Frameworks</h2>
|
||
<ul>
|
||
<li><a href="/frameworks/react">React</a></li>
|
||
<li><a href="/frameworks/vue">Vue</a></li>
|
||
<li><a href="/frameworks/angular">Angular</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Resources</h2>
|
||
<ul>
|
||
<li><a href="/resources/community">Community</a></li>
|
||
<li>
|
||
<a
|
||
href="https://github.com/onsonr/nebula/discussions"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>Help & Support</a
|
||
>
|
||
</li>
|
||
<li><a href="/resources/accessibility">Accessibility</a></li>
|
||
<li><a href="/resources/contributing">Contributing</a></li>
|
||
<li><a href="/resources/changelog">Changelog</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Components</h2>
|
||
<ul>
|
||
<li>
|
||
<a href="/components/alert"> Alert </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/animated-image"> Animated Image </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/animation"> Animation </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/avatar"> Avatar </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/badge"> Badge </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/breadcrumb"> Breadcrumb </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/breadcrumb-item"> Breadcrumb Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/button"> Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/button-group"> Button Group </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/card"> Card </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/carousel"> Carousel </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/carousel-item"> Carousel Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/checkbox"> Checkbox </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/color-picker"> Color Picker </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/copy-button"> Copy Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/details"> Details </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/dialog"> Dialog </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/divider"> Divider </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/drawer"> Drawer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/dropdown"> Dropdown </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/format-bytes"> Format Bytes </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/format-date"> Format Date </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/format-number"> Format Number </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/icon"> Icon </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/icon-button"> Icon Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/image-comparer"> Image Comparer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/include"> Include </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/input"> Input </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/menu"> Menu </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/menu-item"> Menu Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/menu-label"> Menu Label </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/mutation-observer"> Mutation Observer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/option"> Option </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/popup"> Popup </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/progress-bar"> Progress Bar </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/progress-ring"> Progress Ring </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/qr-code"> QR Code </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/radio"> Radio </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/radio-button"> Radio Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/radio-group"> Radio Group </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/range"> Range </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/rating"> Rating </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/relative-time"> Relative Time </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/resize-observer"> Resize Observer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/select"> Select </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/skeleton"> Skeleton </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/spinner"> Spinner </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/split-panel"> Split Panel </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/switch"> Switch </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tab"> Tab </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tab-group"> Tab Group </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tab-panel"> Tab Panel </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tag"> Tag </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/textarea"> Textarea </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tooltip" class="active-link"> Tooltip </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tree"> Tree </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tree-item"> Tree Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/visually-hidden"> Visually Hidden </a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Design Tokens</h2>
|
||
<ul>
|
||
<li><a href="/tokens/typography">Typography</a></li>
|
||
<li><a href="/tokens/color">Color</a></li>
|
||
<li><a href="/tokens/spacing">Spacing</a></li>
|
||
<li><a href="/tokens/elevation">Elevation</a></li>
|
||
<li><a href="/tokens/border-radius">Border Radius</a></li>
|
||
<li><a href="/tokens/transition">Transition</a></li>
|
||
<li><a href="/tokens/z-index">Z-index</a></li>
|
||
<li><a href="/tokens/more">More Tokens</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Tutorials</h2>
|
||
<ul>
|
||
<li><a href="/tutorials/integrating-with-astro">Integrating with Astro</a></li>
|
||
<li><a href="/tutorials/integrating-with-laravel">Integrating with Laravel</a></li>
|
||
<li><a href="/tutorials/integrating-with-nextjs">Integrating with NextJS</a></li>
|
||
<li><a href="/tutorials/integrating-with-rails">Integrating with Rails</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</aside>
|
||
|
||
<main>
|
||
<a id="main-content"></a>
|
||
<article id="content" class="content content--with-toc">
|
||
<div class="content__toc">
|
||
<ul>
|
||
<li class="top"><a href="#">Tooltip</a></li>
|
||
<li data-level="2"><a href="#examples">Examples</a></li>
|
||
<li data-level="3"><a href="#placement">Placement</a></li>
|
||
<li data-level="3"><a href="#click-trigger">Click Trigger</a></li>
|
||
<li data-level="3"><a href="#manual-trigger">Manual Trigger</a></li>
|
||
<li data-level="3"><a href="#removing-arrows">Removing Arrows</a></li>
|
||
<li data-level="3"><a href="#html-in-tooltips">HTML in Tooltips</a></li>
|
||
<li data-level="3"><a href="#setting-a-maximum-width">Setting a Maximum Width</a></li>
|
||
<li data-level="3"><a href="#hoisting">Hoisting</a></li>
|
||
<li data-level="2"><a href="#importing">Importing</a></li>
|
||
<li data-level="2"><a href="#slots">Slots</a></li>
|
||
<li data-level="2"><a href="#properties">Properties</a></li>
|
||
<li data-level="2"><a href="#events">Events</a></li>
|
||
<li data-level="2"><a href="#methods">Methods</a></li>
|
||
<li data-level="2"><a href="#custom-properties">Custom Properties</a></li>
|
||
<li data-level="2"><a href="#parts">Parts</a></li>
|
||
<li data-level="2"><a href="#animations">Animations</a></li>
|
||
<li data-level="2"><a href="#dependencies">Dependencies</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="content__body">
|
||
<header class="component-header">
|
||
<h1>Tooltip</h1>
|
||
|
||
<div class="component-header__tag">
|
||
<code><sl-tooltip> | SlTooltip</code>
|
||
</div>
|
||
|
||
<div class="component-header__info">
|
||
<sl-badge variant="neutral" pill=""> Since 2.0 </sl-badge>
|
||
<sl-badge variant="primary" pill="" style="text-transform: capitalize"> stable </sl-badge>
|
||
</div>
|
||
</header>
|
||
|
||
<p class="component-summary">Tooltips display additional information based on a specific action.</p>
|
||
|
||
<p>
|
||
A tooltip’s target is its <em>first child element</em>, so you should only wrap one element inside of the
|
||
tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.
|
||
</p>
|
||
<p>
|
||
Tooltips use <code>display: contents</code> so they won’t interfere with how elements are positioned in a
|
||
flex or grid layout.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-tooltip content="This is a tooltip">
|
||
<sl-button>Hover Me</sl-button>
|
||
</sl-tooltip>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-331">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-1008"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Hover Me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1008"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-1009"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hover Me</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1009"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-331"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 id="examples" class="anchor-heading">
|
||
Examples<a href="#examples" aria-label='Direct link to "Examples"'></a>
|
||
</h2>
|
||
<h3 id="placement" class="anchor-heading">
|
||
Placement<a href="#placement" aria-label='Direct link to "Placement"'></a>
|
||
</h3>
|
||
<p>Use the <code>placement</code> attribute to set the preferred placement of the tooltip.</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<div class="tooltip-placement-example">
|
||
<div class="tooltip-placement-example-row">
|
||
<sl-tooltip content="top-start" placement="top-start">
|
||
<sl-button></sl-button>
|
||
</sl-tooltip>
|
||
|
||
<sl-tooltip content="top" placement="top">
|
||
<sl-button></sl-button>
|
||
</sl-tooltip>
|
||
|
||
<sl-tooltip content="top-end" placement="top-end">
|
||
<sl-button></sl-button>
|
||
</sl-tooltip>
|
||
</div>
|
||
|
||
<div class="tooltip-placement-example-row">
|
||
<sl-tooltip content="left-start" placement="left-start">
|
||
<sl-button></sl-button>
|
||
</sl-tooltip>
|
||
|
||
<sl-tooltip content="right-start" placement="right-start">
|
||
<sl-button></sl-button>
|
||
</sl-tooltip>
|
||
</div>
|
||
|
||
<div class="tooltip-placement-example-row">
|
||
<sl-tooltip content="left" placement="left">
|
||
<sl-button></sl-button>
|
||
</sl-tooltip>
|
||
|
||
<sl-tooltip content="right" placement="right">
|
||
<sl-button></sl-button>
|
||
</sl-tooltip>
|
||
</div>
|
||
|
||
<div class="tooltip-placement-example-row">
|
||
<sl-tooltip content="left-end" placement="left-end">
|
||
<sl-button></sl-button>
|
||
</sl-tooltip>
|
||
|
||
<sl-tooltip content="right-end" placement="right-end">
|
||
<sl-button></sl-button>
|
||
</sl-tooltip>
|
||
</div>
|
||
|
||
<div class="tooltip-placement-example-row">
|
||
<sl-tooltip content="bottom-start" placement="bottom-start">
|
||
<sl-button></sl-button>
|
||
</sl-tooltip>
|
||
|
||
<sl-tooltip content="bottom" placement="bottom">
|
||
<sl-button></sl-button>
|
||
</sl-tooltip>
|
||
|
||
<sl-tooltip content="bottom-end" placement="bottom-end">
|
||
<sl-button></sl-button>
|
||
</sl-tooltip>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.tooltip-placement-example {
|
||
width: 250px;
|
||
margin: 1rem;
|
||
}
|
||
|
||
.tooltip-placement-example-row:after {
|
||
content: '';
|
||
display: table;
|
||
clear: both;
|
||
}
|
||
|
||
.tooltip-placement-example sl-button {
|
||
float: left;
|
||
width: 2.5rem;
|
||
margin-right: 0.25rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
|
||
.tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
|
||
margin-left: calc(40px + 0.25rem);
|
||
}
|
||
|
||
.tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
|
||
.tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
|
||
.tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
|
||
margin-left: calc((40px * 3) + (0.25rem * 3));
|
||
}
|
||
</style>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-332">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-1010"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example-row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-start<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-end<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example-row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left-start<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right-start<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example-row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example-row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left-end<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right-end<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example-row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom-start<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom-end<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
<span class="token selector">.tooltip-placement-example</span> <span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.tooltip-placement-example-row:after</span> <span class="token punctuation">{</span>
|
||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span>
|
||
<span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.tooltip-placement-example sl-button</span> <span class="token punctuation">{</span>
|
||
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> 2.5rem<span class="token punctuation">;</span>
|
||
<span class="token property">margin-right</span><span class="token punctuation">:</span> 0.25rem<span class="token punctuation">;</span>
|
||
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0.25rem<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
|
||
.tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button</span> <span class="token punctuation">{</span>
|
||
<span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>40px + 0.25rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
|
||
.tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
|
||
.tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button</span> <span class="token punctuation">{</span>
|
||
<span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token punctuation">(</span>40px * 3<span class="token punctuation">)</span> + <span class="token punctuation">(</span>0.25rem * 3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1010"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-1011"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||
.tooltip-placement-example {
|
||
width: 250px;
|
||
}
|
||
|
||
.tooltip-placement-example-row:after {
|
||
content: '';
|
||
display: table;
|
||
clear: both;
|
||
}
|
||
|
||
.tooltip-placement-example sl-button {
|
||
float: left;
|
||
width: 2.5rem;
|
||
margin-right: 0.25rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
|
||
.tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
|
||
margin-left: calc(40px + 0.25rem);
|
||
}
|
||
|
||
.tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
|
||
.tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
|
||
.tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
|
||
margin-left: calc((40px * 3) + (0.25rem * 3));
|
||
}
|
||
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example-row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-start<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-end<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example-row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left-start<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right-start<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example-row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example-row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left-end<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right-end<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example-row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom-start<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom-end<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1011"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-332"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="click-trigger" class="anchor-heading">
|
||
Click Trigger<a href="#click-trigger" aria-label='Direct link to "Click Trigger"'></a>
|
||
</h3>
|
||
<p>
|
||
Set the <code>trigger</code> attribute to <code>click</code> to toggle the tooltip on click instead of
|
||
hover.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-tooltip content="Click again to dismiss" trigger="click">
|
||
<sl-button>Click to Toggle</sl-button>
|
||
</sl-tooltip>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-333">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-1012"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click again to dismiss<span class="token punctuation">"</span></span> <span class="token attr-name">trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>click<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Click to Toggle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1012"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-1013"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click again to dismiss<span class="token punctuation">"</span></span> <span class="token attr-name">trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>click<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Click to Toggle</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1013"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-333"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="manual-trigger" class="anchor-heading">
|
||
Manual Trigger<a href="#manual-trigger" aria-label='Direct link to "Manual Trigger"'></a>
|
||
</h3>
|
||
<p>
|
||
Tooltips can be controlled programmatically by setting the <code>trigger</code> attribute to
|
||
<code>manual</code>. Use the <code>open</code> attribute to control when the tooltip is shown.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-button style="margin-right: 4rem">Toggle Manually</sl-button>
|
||
|
||
<sl-tooltip content="This is an avatar" trigger="manual" class="manual-tooltip">
|
||
<sl-avatar label="User"></sl-avatar>
|
||
</sl-tooltip>
|
||
|
||
<script>
|
||
(() => {
|
||
const tooltip = document.querySelector('.manual-tooltip');
|
||
const toggle = tooltip.previousElementSibling;
|
||
|
||
toggle.addEventListener('click', () => (tooltip.open = !tooltip.open));
|
||
})();
|
||
</script>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-334">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-1014"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Toggle Manually<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is an avatar<span class="token punctuation">"</span></span> <span class="token attr-name">trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manual<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manual-tooltip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-avatar</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>User<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-avatar</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">const</span> tooltip <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.manual-tooltip'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> toggle <span class="token operator">=</span> tooltip<span class="token punctuation">.</span>previousElementSibling<span class="token punctuation">;</span>
|
||
|
||
toggle<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>tooltip<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token operator">!</span>tooltip<span class="token punctuation">.</span>open<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1014"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-1015"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlAvatar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/avatar'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> setOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">marginRight</span><span class="token operator">:</span> <span class="token string">'4rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token operator">!</span>open<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
Toggle Manually
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>open<span class="token punctuation">}</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is an avatar<span class="token punctuation">"</span></span> <span class="token attr-name">trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manual<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlAvatar</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1015"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-334"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="removing-arrows" class="anchor-heading">
|
||
Removing Arrows<a href="#removing-arrows" aria-label='Direct link to "Removing Arrows"'></a>
|
||
</h3>
|
||
<p>
|
||
You can control the size of tooltip arrows by overriding the <code>--sl-tooltip-arrow-size</code> design
|
||
token. To remove them, set the value to <code>0</code> as shown below.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-tooltip content="This is a tooltip" style="--sl-tooltip-arrow-size: 0">
|
||
<sl-button>No Arrow</sl-button>
|
||
</sl-tooltip>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-335">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-1016"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--sl-tooltip-arrow-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>No Arrow<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1016"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-1017"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--sl-tooltip-arrow-size'</span><span class="token operator">:</span> <span class="token string">'0'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Above</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Below</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1017"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-335"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<p>
|
||
To override it globally, set it in a root block in your stylesheet after the Nebula stylesheet is loaded.
|
||
</p>
|
||
<pre><code class="language-css" id="code-block-1018"><span class="token selector">:root</span> <span class="token punctuation">{</span>
|
||
<span class="token property">--sl-tooltip-arrow-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1018"></sl-copy-button></pre>
|
||
<h3 id="html-in-tooltips" class="anchor-heading">
|
||
HTML in Tooltips<a href="#html-in-tooltips" aria-label='Direct link to "HTML in Tooltips"'></a>
|
||
</h3>
|
||
<p>
|
||
Use the <code>content</code> slot to create tooltips with HTML content. Tooltips are designed only for text
|
||
and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls,
|
||
in a tooltip.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-tooltip>
|
||
<div slot="content">I’m not <strong>just</strong> a tooltip, I’m a <em>tooltip</em> with HTML!</div>
|
||
|
||
<sl-button>Hover me</sl-button>
|
||
</sl-tooltip>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-336">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-1019"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm not <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>just<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> a tooltip, I'm a <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>tooltip<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> with HTML!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Hover me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1019"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-1020"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
I'm not <strong>just</strong> a tooltip, I'm a </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span><span class="token plain-text">tooltip</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span><span class="token plain-text"> with HTML!
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hover Me</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1020"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-336"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="setting-a-maximum-width" class="anchor-heading">
|
||
Setting a Maximum Width<a
|
||
href="#setting-a-maximum-width"
|
||
aria-label='Direct link to "Setting a Maximum Width"'
|
||
></a>
|
||
</h3>
|
||
<p>
|
||
Use the <code>--max-width</code> custom property to change the width the tooltip can grow to before wrapping
|
||
occurs.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-tooltip style="--max-width: 80px" content="This tooltip will wrap after only 80 pixels.">
|
||
<sl-button>Hover me</sl-button>
|
||
</sl-tooltip>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-337">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-1021"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--max-width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This tooltip will wrap after only 80 pixels.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Hover me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1021"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-1022"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--max-width'</span><span class="token operator">:</span> <span class="token string">'80px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This tooltip will wrap after only 80 pixels.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hover Me</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1022"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-337"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="hoisting" class="anchor-heading">
|
||
Hoisting<a href="#hoisting" aria-label='Direct link to "Hoisting"'></a>
|
||
</h3>
|
||
<p>
|
||
Tooltips will be clipped if they’re inside a container that has <code>overflow: auto|hidden|scroll</code>.
|
||
The <code>hoist</code> attribute forces the tooltip to use a fixed positioning strategy, allowing it to
|
||
break out of the container. In this case, the tooltip will be positioned relative to its
|
||
<a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>containing block</a
|
||
>, which is usually the viewport unless an ancestor uses a <code>transform</code>, <code>perspective</code>,
|
||
or <code>filter</code>.
|
||
<a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>Refer to this page</a
|
||
>
|
||
for more details.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<div class="tooltip-hoist">
|
||
<sl-tooltip content="This is a tooltip">
|
||
<sl-button>No Hoist</sl-button>
|
||
</sl-tooltip>
|
||
|
||
<sl-tooltip content="This is a tooltip" hoist="">
|
||
<sl-button>Hoist</sl-button>
|
||
</sl-tooltip>
|
||
</div>
|
||
|
||
<style>
|
||
.tooltip-hoist {
|
||
position: relative;
|
||
border: solid 2px var(--sl-panel-border-color);
|
||
overflow: hidden;
|
||
padding: var(--sl-spacing-medium);
|
||
}
|
||
</style>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-338">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-1023"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-hoist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>No Hoist<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span> <span class="token attr-name">hoist</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Hoist<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
<span class="token selector">.tooltip-hoist</span> <span class="token punctuation">{</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
||
<span class="token property">border</span><span class="token punctuation">:</span> solid 2px <span class="token function">var</span><span class="token punctuation">(</span>--sl-panel-border-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
|
||
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1023"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-1024"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||
.tooltip-hoist {
|
||
border: solid 2px var(--sl-panel-border-color);
|
||
overflow: hidden;
|
||
padding: var(--sl-spacing-medium);
|
||
position: relative;
|
||
}
|
||
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-hoist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">No Hoist</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTooltip</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span> <span class="token attr-name">hoist</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hoist</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-1024"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-338"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 id="importing" class="anchor-heading">
|
||
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
|
||
</h2>
|
||
<p>
|
||
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free
|
||
to use any of the following snippets to
|
||
<a href="/getting-started/installation#cherry-picking">cherry pick</a> this component.
|
||
</p>
|
||
|
||
<sl-tab-group>
|
||
<sl-tab slot="nav" panel="script">Script</sl-tab>
|
||
<sl-tab slot="nav" panel="import">Import</sl-tab>
|
||
<sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
|
||
<sl-tab slot="nav" panel="react">React</sl-tab>
|
||
|
||
<sl-tab-panel name="script">
|
||
<p>
|
||
To import this component from
|
||
<a
|
||
href="https://www.jsdelivr.com/package/npm/@onsonr/nebula"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>the CDN</a
|
||
>
|
||
using a script tag:
|
||
</p>
|
||
<pre><code class="language-html" id="code-block-1025"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tooltip/tooltip.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-1025"></sl-copy-button></pre>
|
||
</sl-tab-panel>
|
||
|
||
<sl-tab-panel name="import">
|
||
<p>
|
||
To import this component from
|
||
<a
|
||
href="https://www.jsdelivr.com/package/npm/@onsonr/nebula"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>the CDN</a
|
||
>
|
||
using a JavaScript import:
|
||
</p>
|
||
<pre><code class="language-js" id="code-block-1026"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tooltip/tooltip.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1026"></sl-copy-button></pre>
|
||
</sl-tab-panel>
|
||
|
||
<sl-tab-panel name="bundler">
|
||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||
<pre><code class="language-js" id="code-block-1027"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tooltip/tooltip.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1027"></sl-copy-button></pre>
|
||
</sl-tab-panel>
|
||
|
||
<sl-tab-panel name="react">
|
||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||
<pre><code class="language-js" id="code-block-1028"><span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1028"></sl-copy-button></pre>
|
||
</sl-tab-panel>
|
||
</sl-tab-group>
|
||
|
||
<h2 id="slots" class="anchor-heading">Slots<a href="#slots" aria-label='Direct link to "Slots"'></a></h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="nowrap">(default)</td>
|
||
<td>
|
||
The tooltip’s target element. Avoid slotting in more than one element, as subsequent ones will be
|
||
ignored.
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap">
|
||
<code>content</code>
|
||
</td>
|
||
<td>
|
||
The content to render in the tooltip. Alternatively, you can use the <code>content</code> attribute.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em>Learn more about <a href="/getting-started/usage#slots">using slots</a>.</em>
|
||
</p>
|
||
|
||
<h2 id="properties" class="anchor-heading">
|
||
Properties<a href="#properties" aria-label='Direct link to "Properties"'></a>
|
||
</h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
<th class="table-reflects">Reflects</th>
|
||
<th class="table-type">Type</th>
|
||
<th class="table-default">Default</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">content</code>
|
||
</td>
|
||
<td>
|
||
The tooltip’s content. If you need to display HTML, use the <code>content</code> slot instead.
|
||
</td>
|
||
<td style="text-align: center"></td>
|
||
<td>
|
||
<code>string</code>
|
||
</td>
|
||
<td>
|
||
<code>''</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">placement</code>
|
||
</td>
|
||
<td>
|
||
The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep
|
||
the tooltip inside of the viewport.
|
||
</td>
|
||
<td style="text-align: center"></td>
|
||
<td>
|
||
<code>
|
||
'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' |
|
||
'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'</code
|
||
>
|
||
</td>
|
||
<td>
|
||
<code>'top'</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">disabled</code>
|
||
</td>
|
||
<td>Disables the tooltip so it won’t show when triggered.</td>
|
||
<td style="text-align: center">
|
||
<sl-icon label="yes" name="check-lg"></sl-icon>
|
||
</td>
|
||
<td>
|
||
<code>boolean</code>
|
||
</td>
|
||
<td>
|
||
<code>false</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">distance</code>
|
||
</td>
|
||
<td>The distance in pixels from which to offset the tooltip away from its target.</td>
|
||
<td style="text-align: center"></td>
|
||
<td>
|
||
<code>number</code>
|
||
</td>
|
||
<td>
|
||
<code>8</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">open</code>
|
||
</td>
|
||
<td>
|
||
Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
|
||
</td>
|
||
<td style="text-align: center">
|
||
<sl-icon label="yes" name="check-lg"></sl-icon>
|
||
</td>
|
||
<td>
|
||
<code>boolean</code>
|
||
</td>
|
||
<td>
|
||
<code>false</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">skidding</code>
|
||
</td>
|
||
<td>The distance in pixels from which to offset the tooltip along its target.</td>
|
||
<td style="text-align: center"></td>
|
||
<td>
|
||
<code>number</code>
|
||
</td>
|
||
<td>
|
||
<code>0</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">trigger</code>
|
||
</td>
|
||
<td>
|
||
Controls how the tooltip is activated. Possible options include <code>click</code>,
|
||
<code>hover</code>, <code>focus</code>, and <code>manual</code>. Multiple options can be passed by
|
||
separating them with a space. When manual is used, the tooltip must be activated programmatically.
|
||
</td>
|
||
<td style="text-align: center"></td>
|
||
<td>
|
||
<code>string</code>
|
||
</td>
|
||
<td>
|
||
<code>'hover focus'</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">hoist</code>
|
||
</td>
|
||
<td>
|
||
Enable this option to prevent the tooltip from being clipped when the component is placed inside a
|
||
container with
|
||
<code>overflow: auto|hidden|scroll</code>. Hoisting uses a fixed positioning strategy that works in
|
||
many, but not all, scenarios.
|
||
</td>
|
||
<td style="text-align: center"></td>
|
||
<td>
|
||
<code>boolean</code>
|
||
</td>
|
||
<td>
|
||
<code>false</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>updateComplete</code></td>
|
||
<td>
|
||
A read-only promise that resolves when the component has
|
||
<a href="/getting-started/usage?#component-rendering-and-updating">finished updating</a>.
|
||
</td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em
|
||
>Learn more about
|
||
<a href="/getting-started/usage#attributes-and-properties">attributes and properties</a>.</em
|
||
>
|
||
</p>
|
||
|
||
<h2 id="events" class="anchor-heading">Events<a href="#events" aria-label='Direct link to "Events"'></a></h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name" data-flavor="html">Name</th>
|
||
<th class="table-name" data-flavor="react">React Event</th>
|
||
<th class="table-description">Description</th>
|
||
<th class="table-event-detail">Event Detail</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td data-flavor="html"><code class="nowrap">sl-show</code></td>
|
||
<td data-flavor="react"><code class="nowrap">onSlShow</code></td>
|
||
<td>Emitted when the tooltip begins to show.</td>
|
||
<td>-</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td data-flavor="html"><code class="nowrap">sl-after-show</code></td>
|
||
<td data-flavor="react"><code class="nowrap">onSlAfterShow</code></td>
|
||
<td>Emitted after the tooltip has shown and all animations are complete.</td>
|
||
<td>-</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td data-flavor="html"><code class="nowrap">sl-hide</code></td>
|
||
<td data-flavor="react"><code class="nowrap">onSlHide</code></td>
|
||
<td>Emitted when the tooltip begins to hide.</td>
|
||
<td>-</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td data-flavor="html"><code class="nowrap">sl-after-hide</code></td>
|
||
<td data-flavor="react"><code class="nowrap">onSlAfterHide</code></td>
|
||
<td>Emitted after the tooltip has hidden and all animations are complete.</td>
|
||
<td>-</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em>Learn more about <a href="/getting-started/usage#events">events</a>.</em>
|
||
</p>
|
||
|
||
<h2 id="methods" class="anchor-heading">
|
||
Methods<a href="#methods" aria-label='Direct link to "Methods"'></a>
|
||
</h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
<th class="table-arguments">Arguments</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="nowrap"><code>show()</code></td>
|
||
<td>Shows the tooltip.</td>
|
||
<td>-</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>hide()</code></td>
|
||
<td>Hides the tooltip</td>
|
||
<td>-</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em>Learn more about <a href="/getting-started/usage#methods">methods</a>.</em>
|
||
</p>
|
||
|
||
<h2 id="custom-properties" class="anchor-heading">
|
||
Custom Properties<a href="#custom-properties" aria-label='Direct link to "Custom Properties"'></a>
|
||
</h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
<th class="table-default">Default</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="nowrap"><code>--max-width</code></td>
|
||
<td>The maximum width of the tooltip before its content will wrap.</td>
|
||
<td></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>--hide-delay</code></td>
|
||
<td>The amount of time to wait before hiding the tooltip when hovering.</td>
|
||
<td></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>--show-delay</code></td>
|
||
<td>The amount of time to wait before showing the tooltip when hovering.</td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em
|
||
>Learn more about
|
||
<a href="/getting-started/usage#custom-properties">customizing CSS custom properties</a>.</em
|
||
>
|
||
</p>
|
||
|
||
<h2 id="parts" class="anchor-heading">Parts<a href="#parts" aria-label='Direct link to "Parts"'></a></h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="nowrap"><code>base</code></td>
|
||
<td>The component’s base wrapper, an <code><sl-popup></code> element.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>base__popup</code></td>
|
||
<td>
|
||
The popup’s exported <code>popup</code> part. Use this to target the tooltip’s popup container.
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>base__arrow</code></td>
|
||
<td>The popup’s exported <code>arrow</code> part. Use this to target the tooltip’s arrow.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>body</code></td>
|
||
<td>The tooltip’s body where its content is rendered.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em>Learn more about <a href="/getting-started/customizing/#css-parts">customizing CSS parts</a>.</em>
|
||
</p>
|
||
|
||
<h2 id="animations" class="anchor-heading">
|
||
Animations<a href="#animations" aria-label='Direct link to "Animations"'></a>
|
||
</h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="nowrap"><code>tooltip.show</code></td>
|
||
<td>The animation to use when showing the tooltip.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>tooltip.hide</code></td>
|
||
<td>The animation to use when hiding the tooltip.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em>Learn more about <a href="/getting-started/customizing#animations">customizing animations</a>.</em>
|
||
</p>
|
||
|
||
<h2 id="dependencies" class="anchor-heading">
|
||
Dependencies<a href="#dependencies" aria-label='Direct link to "Dependencies"'></a>
|
||
</h2>
|
||
|
||
<p>This component automatically imports the following dependencies.</p>
|
||
|
||
<ul>
|
||
<li><code><sl-popup></code></li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</main>
|
||
</body>
|
||
</html>
|