Light Dark System

Tooltip

<sc-tooltip> | ScTooltip
Since 2.0 stable

Tooltips display additional information based on a specific action.

A tooltip’s target is its first child element, 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.

Tooltips use display: contents so they won’t interfere with how elements are positioned in a flex or grid layout.

Hover Me 
<sc-tooltip content="This is a tooltip">
  <sc-button>Hover Me</sc-button>
</sc-tooltip>

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScTooltip from '@styledc-dev/styledc/dist/react/tooltip';

const App = () => (
  <ScTooltip content="This is a tooltip">
    <ScButton>Hover Me</ScButton>
  </ScTooltip>
);

Examples

Placement

Use the placement attribute to set the preferred placement of the tooltip.

<div class="tooltip-placement-example">
  <div class="tooltip-placement-example-row">
    <sc-tooltip content="top-start" placement="top-start">
      <sc-button></sc-button>
    </sc-tooltip>

    <sc-tooltip content="top" placement="top">
      <sc-button></sc-button>
    </sc-tooltip>

    <sc-tooltip content="top-end" placement="top-end">
      <sc-button></sc-button>
    </sc-tooltip>
  </div>

  <div class="tooltip-placement-example-row">
    <sc-tooltip content="left-start" placement="left-start">
      <sc-button></sc-button>
    </sc-tooltip>

    <sc-tooltip content="right-start" placement="right-start">
      <sc-button></sc-button>
    </sc-tooltip>
  </div>

  <div class="tooltip-placement-example-row">
    <sc-tooltip content="left" placement="left">
      <sc-button></sc-button>
    </sc-tooltip>

    <sc-tooltip content="right" placement="right">
      <sc-button></sc-button>
    </sc-tooltip>
  </div>

  <div class="tooltip-placement-example-row">
    <sc-tooltip content="left-end" placement="left-end">
      <sc-button></sc-button>
    </sc-tooltip>

    <sc-tooltip content="right-end" placement="right-end">
      <sc-button></sc-button>
    </sc-tooltip>
  </div>

  <div class="tooltip-placement-example-row">
    <sc-tooltip content="bottom-start" placement="bottom-start">
      <sc-button></sc-button>
    </sc-tooltip>

    <sc-tooltip content="bottom" placement="bottom">
      <sc-button></sc-button>
    </sc-tooltip>

    <sc-tooltip content="bottom-end" placement="bottom-end">
      <sc-button></sc-button>
    </sc-tooltip>
  </div>
</div>

<style>
  .tooltip-placement-example {
    width: 250px;
    margin: 1rem;
  }

  .tooltip-placement-example-row:after {
    content: '';
    display: table;
    clear: both;
  }

  .tooltip-placement-example sc-button {
    float: left;
    width: 2.5rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .tooltip-placement-example-row:nth-child(1) sc-tooltip:first-child sc-button,
  .tooltip-placement-example-row:nth-child(5) sc-tooltip:first-child sc-button {
    margin-left: calc(40px + 0.25rem);
  }

  .tooltip-placement-example-row:nth-child(2) sc-tooltip:nth-child(2) sc-button,
  .tooltip-placement-example-row:nth-child(3) sc-tooltip:nth-child(2) sc-button,
  .tooltip-placement-example-row:nth-child(4) sc-tooltip:nth-child(2) sc-button {
    margin-left: calc((40px * 3) + (0.25rem * 3));
  }
</style>

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScTooltip from '@styledc-dev/styledc/dist/react/tooltip';

const css = `
  .tooltip-placement-example {
    width: 250px;
  }

  .tooltip-placement-example-row:after {
    content: '';
    display: table;
    clear: both;
  }

  .tooltip-placement-example sc-button {
    float: left;
    width: 2.5rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .tooltip-placement-example-row:nth-child(1) sc-tooltip:first-child sc-button,
  .tooltip-placement-example-row:nth-child(5) sc-tooltip:first-child sc-button {
    margin-left: calc(40px + 0.25rem);
  }

  .tooltip-placement-example-row:nth-child(2) sc-tooltip:nth-child(2) sc-button,
  .tooltip-placement-example-row:nth-child(3) sc-tooltip:nth-child(2) sc-button,
  .tooltip-placement-example-row:nth-child(4) sc-tooltip:nth-child(2) sc-button {
    margin-left: calc((40px * 3) + (0.25rem * 3));
  }
`;

const App = () => (
  <>
    <div className="tooltip-placement-example">
      <div className="tooltip-placement-example-row">
        <ScTooltip content="top-start" placement="top-start">
          <ScButton />
        </ScTooltip>

        <ScTooltip content="top" placement="top">
          <ScButton />
        </ScTooltip>

        <ScTooltip content="top-end" placement="top-end">
          <ScButton />
        </ScTooltip>
      </div>

      <div className="tooltip-placement-example-row">
        <ScTooltip content="left-start" placement="left-start">
          <ScButton />
        </ScTooltip>

        <ScTooltip content="right-start" placement="right-start">
          <ScButton />
        </ScTooltip>
      </div>

      <div className="tooltip-placement-example-row">
        <ScTooltip content="left" placement="left">
          <ScButton />
        </ScTooltip>

        <ScTooltip content="right" placement="right">
          <ScButton />
        </ScTooltip>
      </div>

      <div className="tooltip-placement-example-row">
        <ScTooltip content="left-end" placement="left-end">
          <ScButton />
        </ScTooltip>

        <ScTooltip content="right-end" placement="right-end">
          <ScButton />
        </ScTooltip>
      </div>

      <div className="tooltip-placement-example-row">
        <ScTooltip content="bottom-start" placement="bottom-start">
          <ScButton />
        </ScTooltip>

        <ScTooltip content="bottom" placement="bottom">
          <ScButton />
        </ScTooltip>

        <ScTooltip content="bottom-end" placement="bottom-end">
          <ScButton />
        </ScTooltip>
      </div>
    </div>

    <style>{css}</style>
  </>
);

Click Trigger

Set the trigger attribute to click to toggle the tooltip on click instead of hover.

Click to Toggle 
<sc-tooltip content="Click again to dismiss" trigger="click">
  <sc-button>Click to Toggle</sc-button>
</sc-tooltip>

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScTooltip from '@styledc-dev/styledc/dist/react/tooltip';

const App = () => (
  <ScTooltip content="Click again to dismiss" trigger="click">
    <ScButton>Click to Toggle</ScButton>
  </ScTooltip>
);

Manual Trigger

Tooltips can be controlled programmatically by setting the trigger attribute to manual. Use the open attribute to control when the tooltip is shown.

Toggle Manually 
<sc-button style="margin-right: 4rem;">Toggle Manually</sc-button>

<sc-tooltip content="This is an avatar" trigger="manual" class="manual-tooltip">
  <sc-avatar label="User"></sc-avatar>
</sc-tooltip>

<script>
  const tooltip = document.querySelector('.manual-tooltip');
  const toggle = tooltip.previousElementSibling;

  toggle.addEventListener('click', () => (tooltip.open = !tooltip.open));
</script>

import { useState } from 'react';
import ScAvatar from '@styledc-dev/styledc/dist/react/avatar';
import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScTooltip from '@styledc-dev/styledc/dist/react/tooltip';

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <ScButton style={{ marginRight: '4rem' }} onClick={() => setOpen(!open)}>
        Toggle Manually
      </ScButton>

      <ScTooltip open={open} content="This is an avatar" trigger="manual">
        <ScAvatar />
      </ScTooltip>
    </>
  );
};

Removing Arrows

You can control the size of tooltip arrows by overriding the --sc-tooltip-arrow-size design token. To remove them, set the value to 0 as shown below.

No Arrow 
<sc-tooltip content="This is a tooltip" style="--sc-tooltip-arrow-size: 0;">
  <sc-button>No Arrow</sc-button>
</sc-tooltip>

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScTooltip from '@styledc-dev/styledc/dist/react/tooltip';

const App = () => (
  <div style={{ '--sc-tooltip-arrow-size': '0' }}>
    <ScTooltip content="This is a tooltip">
      <ScButton>Above</ScButton>
    </ScTooltip>

    <ScTooltip content="This is a tooltip" placement="bottom">
      <ScButton>Below</ScButton>
    </ScTooltip>
  </div>
);

To override it globally, set it in a root block in your stylesheet after the Shoelace stylesheet is loaded. 

:root {
  --sc-tooltip-arrow-size: 0;
}

HTML in Tooltips

Use the content 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.

I’m not just a tooltip, I’m a tooltip with HTML!
Hover me 
<sc-tooltip>
  <div slot="content">I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!</div>

  <sc-button>Hover me</sc-button>
</sc-tooltip>

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScTooltip from '@styledc-dev/styledc/dist/react/tooltip';

const App = () => (
  <ScTooltip>
    <div slot="content">
      I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
    </div>

    <ScButton>Hover Me</ScButton>
  </ScTooltip>
);

Setting a Maximum Width

Use the --max-width custom property to change the width the tooltip can grow to before wrapping occurs.

Hover me 
<sc-tooltip style="--max-width: 80px;" content="This tooltip will wrap after only 80 pixels.">
  <sc-button>Hover me</sc-button>
</sc-tooltip>

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScTooltip from '@styledc-dev/styledc/dist/react/tooltip';

const App = () => (
  <ScTooltip style={{ '--max-width': '80px' }} content="This tooltip will wrap after only 80 pixels.">
    <ScButton>Hover Me</ScButton>
  </ScTooltip>
);

Hoisting

Tooltips will be clipped if they’re inside a container that has overflow: auto|hidden|scroll. The hoist 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 containing block, which is usually the viewport unless an ancestor uses a transform, perspective, or filter. Refer to this page for more details.

No Hoist Hoist 
<div class="tooltip-hoist">
  <sc-tooltip content="This is a tooltip">
    <sc-button>No Hoist</sc-button>
  </sc-tooltip>

  <sc-tooltip content="This is a tooltip" hoist>
    <sc-button>Hoist</sc-button>
  </sc-tooltip>
</div>

<style>
  .tooltip-hoist {
    position: relative;
    border: solid 2px var(--sc-panel-border-color);
    overflow: hidden;
    padding: var(--sc-spacing-medium);
  }
</style>

import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScTooltip from '@styledc-dev/styledc/dist/react/tooltip';

const css = `
  .tooltip-hoist {
    border: solid 2px var(--sc-panel-border-color);
    overflow: hidden;
    padding: var(--sc-spacing-medium);
    position: relative;
  }
`;

const App = () => (
  <>
    <div class="tooltip-hoist">
      <ScTooltip content="This is a tooltip">
        <ScButton>No Hoist</ScButton>
      </ScTooltip>

      <ScTooltip content="This is a tooltip" hoist>
        <ScButton>Hoist</ScButton>
      </ScTooltip>
    </div>

    <style>{css}</style>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@styledc-dev/styledc@1.0.0/cdn/components/tooltip/tooltip.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@styledc-dev/styledc@1.0.0/cdn/components/tooltip/tooltip.js';

To import this component using a bundler:

import '@styledc-dev/styledc/dist/components/tooltip/tooltip.js';

To import this component as a React component:

import ScTooltip from '@styledc-dev/styledc/dist/react/tooltip';

Slots

Name Description
(default) The tooltip’s target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
content The content to render in the tooltip. Alternatively, you can use the content attribute.

Learn more about using slots.

Properties

Name Description Reflects Type Default
content The tooltip’s content. If you need to display HTML, use the content slot instead. string ''
placement The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport. 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' 'top'
disabled Disables the tooltip so it won’t show when triggered. boolean false
distance The distance in pixels from which to offset the tooltip away from its target. number 8
open Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. boolean false
skidding The distance in pixels from which to offset the tooltip along its target. number 0
trigger Controls how the tooltip is activated. Possible options include click, hover, focus, and manual. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically. string 'hover focus'
hoist Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with overflow: auto|hidden|scroll. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sc-show onScShow Emitted when the tooltip begins to show. -
sc-after-show onScAfterShow Emitted after the tooltip has shown and all animations are complete. -
sc-hide onScHide Emitted when the tooltip begins to hide. -
sc-after-hide onScAfterHide Emitted after the tooltip has hidden and all animations are complete. -

Learn more about events.

Methods

Name Description Arguments
show() Shows the tooltip. -
hide() Hides the tooltip -

Learn more about methods.

Custom Properties

Name Description Default
--max-width The maximum width of the tooltip before its content will wrap.
--hide-delay The amount of time to wait before hiding the tooltip when hovering.
--show-delay The amount of time to wait before showing the tooltip when hovering.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper, an <sc-popup> element.
base__popup The popup’s exported popup part. Use this to target the tooltip’s popup container.
base__arrow The popup’s exported arrow part. Use this to target the tooltip’s arrow.
body The tooltip’s body where its content is rendered.

Learn more about customizing CSS parts.

Animations

Name Description
tooltip.show The animation to use when showing the tooltip.
tooltip.hide The animation to use when hiding the tooltip.

Learn more about customizing animations.

Dependencies

This component automatically imports the following dependencies.

  • <sc-popup>