2024-12-08 20:11:42 +00:00
<!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’ < 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’
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 >
2025-01-07 20:25:07 +00:00
< div class = "code-preview__source-group" id = "code-preview-source-group-331" >
2024-12-08 20:11:42 +00:00
< div class = "code-preview__source code-preview__source--html" data-flavor = "html" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1008" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< div class = "code-preview__source code-preview__source--react" data-flavor = "react" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1009" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< / div >
< div class = "code-preview__buttons" >
< button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
2025-01-07 20:25:07 +00:00
aria-controls="code-preview-source-group-331"
2024-12-08 20:11:42 +00:00
>
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 >
2025-01-07 20:25:07 +00:00
< div class = "code-preview__source-group" id = "code-preview-source-group-332" >
2024-12-08 20:11:42 +00:00
< div class = "code-preview__source code-preview__source--html" data-flavor = "html" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1010" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< div class = "code-preview__source code-preview__source--react" data-flavor = "react" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1011" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< / div >
< div class = "code-preview__buttons" >
< button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
2025-01-07 20:25:07 +00:00
aria-controls="code-preview-source-group-332"
2024-12-08 20:11:42 +00:00
>
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 >
2025-01-07 20:25:07 +00:00
< div class = "code-preview__source-group" id = "code-preview-source-group-333" >
2024-12-08 20:11:42 +00:00
< div class = "code-preview__source code-preview__source--html" data-flavor = "html" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1012" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< div class = "code-preview__source code-preview__source--react" data-flavor = "react" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1013" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< / div >
< div class = "code-preview__buttons" >
< button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
2025-01-07 20:25:07 +00:00
aria-controls="code-preview-source-group-333"
2024-12-08 20:11:42 +00:00
>
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 >
2025-01-07 20:25:07 +00:00
< div class = "code-preview__source-group" id = "code-preview-source-group-334" >
2024-12-08 20:11:42 +00:00
< div class = "code-preview__source code-preview__source--html" data-flavor = "html" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1014" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< div class = "code-preview__source code-preview__source--react" data-flavor = "react" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1015" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< / div >
< div class = "code-preview__buttons" >
< button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
2025-01-07 20:25:07 +00:00
aria-controls="code-preview-source-group-334"
2024-12-08 20:11:42 +00:00
>
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 >
2025-01-07 20:25:07 +00:00
< div class = "code-preview__source-group" id = "code-preview-source-group-335" >
2024-12-08 20:11:42 +00:00
< div class = "code-preview__source code-preview__source--html" data-flavor = "html" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1016" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< div class = "code-preview__source code-preview__source--react" data-flavor = "react" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1017" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< / div >
< div class = "code-preview__buttons" >
< button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
2025-01-07 20:25:07 +00:00
aria-controls="code-preview-source-group-335"
2024-12-08 20:11:42 +00:00
>
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 >
2025-01-07 20:25:07 +00:00
< pre > < code class = "language-css" id = "code-block-1018" > < span class = "token selector" > :root< / span > < span class = "token punctuation" > {< / span >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1018" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< 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’ < strong > just< / strong > a tooltip, I’ < 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 >
2025-01-07 20:25:07 +00:00
< div class = "code-preview__source-group" id = "code-preview-source-group-336" >
2024-12-08 20:11:42 +00:00
< div class = "code-preview__source code-preview__source--html" data-flavor = "html" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1019" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< div class = "code-preview__source code-preview__source--react" data-flavor = "react" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1020" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< / div >
< div class = "code-preview__buttons" >
< button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
2025-01-07 20:25:07 +00:00
aria-controls="code-preview-source-group-336"
2024-12-08 20:11:42 +00:00
>
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 >
2025-01-07 20:25:07 +00:00
< div class = "code-preview__source-group" id = "code-preview-source-group-337" >
2024-12-08 20:11:42 +00:00
< div class = "code-preview__source code-preview__source--html" data-flavor = "html" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1021" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< div class = "code-preview__source code-preview__source--react" data-flavor = "react" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1022" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< / div >
< div class = "code-preview__buttons" >
< button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
2025-01-07 20:25:07 +00:00
aria-controls="code-preview-source-group-337"
2024-12-08 20:11:42 +00:00
>
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’ < 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 >
2025-01-07 20:25:07 +00:00
< div class = "code-preview__source-group" id = "code-preview-source-group-338" >
2024-12-08 20:11:42 +00:00
< div class = "code-preview__source code-preview__source--html" data-flavor = "html" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1023" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< div class = "code-preview__source code-preview__source--react" data-flavor = "react" >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< 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 >
2025-01-07 20:25:07 +00:00
< / code > < sl-copy-button class = "copy-code-button" from = "code-block-1024" > < / sl-copy-button > < / pre >
2024-12-08 20:11:42 +00:00
< / div >
< / div >
< div class = "code-preview__buttons" >
< button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
2025-01-07 20:25:07 +00:00
aria-controls="code-preview-source-group-338"
2024-12-08 20:11:42 +00:00
>
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’
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 >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< / 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 >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< / sl-tab-panel >
< sl-tab-panel name = "bundler" >
< p > To import this component using < a href = "/getting-started/installation#bundling" > a bundler< / a > :< / p >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< / sl-tab-panel >
< sl-tab-panel name = "react" >
< p > To import this component as a < a href = "/frameworks/react" > React component< / a > :< / p >
2025-01-07 20:25:07 +00:00
< 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 >
2024-12-08 20:11:42 +00:00
< / 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’
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’ < 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’ < / 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’ < code > < sl-popup> < / code > element.< / td >
< / tr >
< tr >
< td class = "nowrap" > < code > base__popup< / code > < / td >
< td >
The popup’ < code > popup< / code > part. Use this to target the tooltip’
< / td >
< / tr >
< tr >
< td class = "nowrap" > < code > base__arrow< / code > < / td >
< td > The popup’ < code > arrow< / code > part. Use this to target the tooltip’ < / td >
< / tr >
< tr >
< td class = "nowrap" > < code > body< / code > < / td >
< td > The tooltip’ < / 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 >
