• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Default
  2. With arrow
  3. Size
  4. With custom trigger
  5. Open on click
  6. Positioning
  7. Show/hide delay
  8. CSS Variables
  9. Properties
  10. Events
  11. Methods
    1. getTooltip() => Promise<HTMLElement>
    2. hideTooltip() => Promise<void>
    3. showTooltip() => Promise<void>
  12. Shadow Parts
  13. Dependencies
    1. Used by
    2. Depends on
    3. Graph
Components Tooltip
(external link)

ld-tooltip #

Tooltips provide additional information, mostly short paragraphs, and can be placed beside all sorts of interface elements.

If your application is mounted to a different element than the body element, or you have z-order related issues, you may need to configure the bodyElement option using the tetherOptions property. For more details check out the related troubleshooting section.

Default #

<ld-tooltip>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>
<LdTooltip>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem'} }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>
Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

With arrow #

<ld-tooltip arrow>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>
<LdTooltip arrow>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem'} }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>
Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Size #

<ld-tooltip arrow>
<ld-typo>I'm the default size tooltip.</ld-typo>
</ld-tooltip>
<ld-tooltip arrow size="sm">
<ld-typo>I'm the small size tooltip.</ld-typo>
</ld-tooltip>
<LdTooltip arrow>
<LdTypo>I'm the default size tooltip.</LdTypo>
</LdTooltip>
<LdTooltip arrow size="sm">
<LdTypo>I'm the small size tooltip.</LdTypo>
</LdTooltip>
I'm the default size tooltip. I'm the small size tooltip.

With custom trigger #

<p>
I am an
<ld-tooltip arrow>
<span slot="trigger" style="text-decoration: underline">inline</span>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>
trigger!
</p>
<p>
I am an
{' '}
<LdTooltip arrow>
<span slot="trigger" style={ { textDecoration: 'underline'} }>inline</span>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>{' '}
trigger!
</p>

I am an inline Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. trigger!

Open on click #

<ld-tooltip trigger-type="click">
<ld-button slot="trigger">click me</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>
<LdTooltip triggerType="click">
<LdButton slot="trigger">click me</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>
click me Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Positioning #

<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.625rem">
<ld-tooltip arrow position="top left" style="text-align: end">
<ld-button slot="trigger" style="width: 9.375rem">top left</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>

<ld-tooltip arrow position="top center" style="text-align: center">
<ld-button slot="trigger" style="width: 9.375rem">top center</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>

<ld-tooltip arrow position="top right">
<ld-button slot="trigger" style="width: 9.375rem">top right</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>

<ld-tooltip arrow position="left top" style="text-align: end">
<ld-button slot="trigger" style="width: 9.375rem">left top</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>

<div></div>

<ld-tooltip arrow position="right top">
<ld-button slot="trigger" style="width: 9.375rem">right top</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>

<ld-tooltip arrow position="left middle" style="text-align: end">
<ld-button slot="trigger" style="width: 9.375rem">left middle</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>

<div></div>

<ld-tooltip arrow position="right middle">
<ld-button slot="trigger" style="width: 9.375rem">right middle</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>

<ld-tooltip arrow position="left bottom" style="text-align: end">
<ld-button slot="trigger" style="width: 9.375rem">left bottom</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>

<div></div>

<ld-tooltip arrow position="right bottom">
<ld-button slot="trigger" style="width: 9.375rem">right bottom</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>

<ld-tooltip arrow position="bottom left" style="text-align: end">
<ld-button slot="trigger" style="width: 9.375rem">bottom left</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>

<ld-tooltip arrow position="bottom center" style="text-align: center">
<ld-button slot="trigger" style="width: 9.375rem">bottom center</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>

<ld-tooltip arrow position="bottom right">
<ld-button slot="trigger" style="width: 9.375rem">bottom right</ld-button>
<ld-typo variant="h4" style="margin-bottom: 0.625rem">Headline</ld-typo>
<ld-typo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ld-typo>
</ld-tooltip>
</div>
<div style={ { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridGap: '0.625rem' } }>
<LdTooltip arrow position="top left" style={ { textAlign: 'end' } }>
<LdButton slot="trigger" style={ { width: '9.375rem' } }>top left</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>

<LdTooltip arrow position="top center" style={ { textAlign: 'center' } }>
<LdButton slot="trigger" style={ { width: '9.375rem' } }>top center</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>

<LdTooltip arrow position="top right">
<LdButton slot="trigger" style={ { width: '9.375rem' } }>top right</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>

<LdTooltip arrow position="left top" style={ { textAlign: 'end' } }>
<LdButton slot="trigger" style={ { width: '9.375rem' } }>left top</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>

<div></div>

<LdTooltip arrow position="right top">
<LdButton slot="trigger" style={ { width: '9.375rem' } }>right top</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>

<LdTooltip arrow position="left middle" style={ { textAlign: 'end' } }>
<LdButton slot="trigger" style={ { width: '9.375rem' } }>left middle</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>

<div></div>

<LdTooltip arrow position="right middle">
<LdButton slot="trigger" style={ { width: '9.375rem' } }>right middle</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>

<LdTooltip arrow position="left bottom" style={ { textAlign: 'end' } }>
<LdButton slot="trigger" style={ { width: '9.375rem' } }>left bottom</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>

<div></div>

<LdTooltip arrow position="right bottom">
<LdButton slot="trigger" style={ { width: '9.375rem' } }>right bottom</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>

<LdTooltip arrow position="bottom left" style={ { textAlign: 'end' } }>
<LdButton slot="trigger" style={ { width: '9.375rem' } }>bottom left</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>

<LdTooltip arrow position="bottom center" style={ { textAlign: 'center' } }>
<LdButton slot="trigger" style={ { width: '9.375rem' } }>bottom center</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>

<LdTooltip arrow position="bottom right">
<LdButton slot="trigger" style={ { width: '9.375rem' } }>bottom right</LdButton>
<LdTypo variant="h4" style={ { marginBottom: '0.625rem' } }>Headline</LdTypo>
<LdTypo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</LdTypo>
</LdTooltip>
</div>
top left Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. top center Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. top right Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. left top Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
right top Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. left middle Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
right middle Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. left bottom Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
right bottom Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. bottom left Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. bottom center Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. bottom right Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Show/hide delay #

<ld-tooltip hide-delay="1000" show-delay="1000">
<ld-button slot="trigger">show/hide 1s</ld-button>
<ld-typo>
I show and hide after 1s
</ld-typo>
</ld-tooltip>

<ld-tooltip show-delay="1000">
<ld-button slot="trigger">show 1s</ld-button>
<ld-typo>
I show after 1s, but hide immediately
</ld-typo>
</ld-tooltip>

<ld-tooltip hide-delay="1000">
<ld-button slot="trigger">hide 1s</ld-button>
<ld-typo>
I show immediately, but hide after 1s
</ld-typo>
</ld-tooltip>

<ld-tooltip show-delay="500" hide-delay="1000">
<ld-button slot="trigger">show 500ms / hide 1s</ld-button>
<ld-typo>
I show after 500ms and hide after 1s
</ld-typo>
</ld-tooltip>
<LdTooltip hideDelay={1000} showDelay={1000}>
<LdButton slot="trigger">show/hide 1s</LdButton>
<LdTypo>I show and hide after 1s</LdTypo>
</LdTooltip>

<LdTooltip showDelay={1000}>
<LdButton slot="trigger">show 1s</LdButton>
<LdTypo>I show after 1s, but hide immediately</LdTypo>
</LdTooltip>

<LdTooltip hideDelay={1000}>
<LdButton slot="trigger">hide 1s</LdButton>
<LdTypo>I show immediately, but hide after 1s</LdTypo>
</LdTooltip>

<LdTooltip showDelay={500} hideDelay={1000}>
<LdButton slot="trigger">show 500ms / hide 1s</LdButton>
<LdTypo>I show after 500ms and hide after 1s</LdTypo>
</LdTooltip>
show/hide 1s I show and hide after 1s show 1s I show after 1s, but hide immediately hide 1s I show immediately, but hide after 1s show 500ms / hide 1s I show after 500ms and hide after 1s

CSS Variables #

Variable Description Default
--ld-tooltip-animation-duration Duration of the tooltip show/hide animation var(--ld-ad-default)
--ld-tooltip-arrow-offset Offset of the arrow from the tooltip border, if arrow is aligned left/right/top/bottom var(--ld-sp-16)
--ld-tooltip-arrow-size Size of the arrow 0.5rem (8px)
--ld-tooltip-distance-from-trigger Space between the trigger and the tooltip (including the arrow) var(--ld-sp-8)
--ld-tooltip-max-width Max width of the tooltip 20rem (320px)
--ld-tooltip-offset-x Offset of the tooltip on the x-axis (If the tooltip is aligned to the right/left border of the trigger, a positive value always means increasing the space between trigger and tooltip.) 0px
--ld-tooltip-offset-y Offset of the tooltip on the y-axis (If the tooltip is aligned to the top/bottom border of the trigger, a positive value always means increasing the space between trigger and tooltip.) 0px

Properties #

Property Attribute Description Type Default
arrow arrow Show arrow boolean undefined
disabled disabled Disable tooltip trigger boolean undefined
hideDelay hide-delay Delay in ms until tooltip hides (only when trigger type is 'hover') number 0
key key for tracking the node's identity when working with lists string | number undefined
position position Position of the tooltip relative to the trigger element (also affects the arrow position) "bottom center" | "bottom left" | "bottom right" | "left bottom" | "left middle" | "left top" | "right bottom" | "right middle" | "right top" | "top center" | "top left" | "top right" 'top center'
ref ref reference to component any undefined
showDelay show-delay Delay in ms until tooltip shows (only when trigger type is 'hover') number 0
size size The tooltip size (effects tooltip padding only) "sm" undefined
tag tag The rendered HTML tag for the tooltip trigger. string 'button'
tetherOptions tether-options Tether options object to be merged with the default options (optionally stringified). string | { attachment?: string; bodyElement?: HTMLElement; classes?: { [className: string]: string | boolean; }; classPrefix?: string; constraints?: ITetherConstraint[]; element?: any; enabled?: boolean; offset?: string; optimizations?: any; target?: any; targetAttachment?: string; targetOffset?: string; targetModifier?: string; } undefined
triggerType trigger-type Event type that triggers the tooltip "click" | "hover" 'hover'

Events #

Event Description Type
ldtooltipclose Emitted when the tooltip is opened. CustomEvent<any>
ldtooltipopen Emitted when the tooltip is opened. CustomEvent<any>

Methods #

getTooltip() => Promise<HTMLElement> #

Get the ld-tooltip-popper element.

Returns #

Type: Promise<HTMLElement>

hideTooltip() => Promise<void> #

Hide tooltip

Returns #

Type: Promise<void>

showTooltip() => Promise<void> #

Show tooltip

Returns #

Type: Promise<void>

Shadow Parts #

Part Description
"content" span element wrapping the default slot
"focusable"
"icon" Default icon when no trigger is supplied
"popper" Popper element (can only be styled as long as tooltip is not initialized)
"trigger" Trigger button

Dependencies #

Used by #

  • ld-context-menu
  • ld-sidenav-header
  • ld-sidenav-navitem
  • ld-sidenav-toggle-outside

Depends on #

  • ld-sr-only
  • ld-tooltip-popper

Graph #

graph TD;
ld-tooltip --> ld-sr-only
ld-tooltip --> ld-tooltip-popper
ld-context-menu --> ld-tooltip
ld-sidenav-header --> ld-tooltip
ld-sidenav-navitem --> ld-tooltip
ld-sidenav-toggle-outside --> ld-tooltip
style ld-tooltip fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS