Tooltip

<wa-tooltip>

Since 2.0

stable

Tooltips display additional information based on a specific action.

A tooltip's target is based on the for attribute which points to an element id.

This is a tooltip

Hover Me

<wa-tooltip for="my-button">This is a tooltip</wa-tooltip> <wa-button id="my-button">Hover Me</wa-button>

Examples Jump to heading

Placement Jump to heading

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

    
top-starttoptop-endleft-startright-startleftrightleft-endright-endbottom-startbottombottom-end

<div class="tooltip-placement-example">
  <div class="tooltip-placement-example-row">
    <wa-button id="tooltip-top-start"></wa-button>
    <wa-button id="tooltip-top"></wa-button>
    <wa-button id="tooltip-top-end"></wa-button>
  </div>

  <div class="tooltip-placement-example-row">
    <wa-button id="tooltip-left-start"></wa-button>
    <wa-button id="tooltip-right-start"></wa-button>
  </div>

  <div class="tooltip-placement-example-row">
    <wa-button id="tooltip-left"></wa-button>
    <wa-button id="tooltip-right"></wa-button>
  </div>

  <div class="tooltip-placement-example-row">
    <wa-button id="tooltip-left-end"></wa-button>
    <wa-button id="tooltip-right-end"></wa-button>
  </div>

  <div class="tooltip-placement-example-row">
    <wa-button id="tooltip-bottom-start"></wa-button>
    <wa-button id="tooltip-bottom"></wa-button>
    <wa-button id="tooltip-bottom-end"></wa-button>
  </div>
</div>

<wa-tooltip for="tooltip-top-start" placement="top-start">top-start</wa-tooltip>
<wa-tooltip for="tooltip-top" placement="top">top</wa-tooltip>
<wa-tooltip for="tooltip-top-end" placement="top-end">top-end</wa-tooltip>
<wa-tooltip for="tooltip-left-start" placement="left-start">left-start</wa-tooltip>
<wa-tooltip for="tooltip-right-start" placement="right-start">right-start</wa-tooltip>
<wa-tooltip for="tooltip-left" placement="left">left</wa-tooltip>
<wa-tooltip for="tooltip-right" placement="right">right</wa-tooltip>
<wa-tooltip for="tooltip-left-end" placement="left-end">left-end</wa-tooltip>
<wa-tooltip for="tooltip-right-end" placement="right-end">right-end</wa-tooltip>
<wa-tooltip for="tooltip-bottom-start" placement="bottom-start">bottom-start</wa-tooltip>
<wa-tooltip for="tooltip-bottom" placement="bottom">bottom</wa-tooltip>
<wa-tooltip for="tooltip-bottom-end" placement="bottom-end">bottom-end</wa-tooltip>

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

  .tooltip-placement-example wa-button {
    width: 2.5rem;
  }

  .tooltip-placement-example-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .tooltip-placement-example-row:nth-child(1),
  .tooltip-placement-example-row:nth-child(5) {
    justify-content: center;
  }
</style>

Click Trigger Jump to heading

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

Click to ToggleClick again to dismiss
                
              

<wa-button id="toggle-button">Click to Toggle</wa-button>
<wa-tooltip for="toggle-button" trigger="click">Click again to dismiss</wa-tooltip>

Manual Trigger Jump to heading

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

Toggle ManuallyThis is an avatar!
                
              

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

<wa-tooltip for="manual-trigger-tooltip" trigger="manual" class="manual-tooltip">This is an avatar!</wa-tooltip>
<wa-avatar id="manual-trigger-tooltip" label="User"></wa-avatar>

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

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

Removing Arrows Jump to heading

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

No ArrowThis is a tooltip with no arrow
                
              

<wa-button id="no-arrow">No Arrow</wa-button>
<wa-tooltip for="no-arrow" style="--wa-tooltip-arrow-size: 0;">This is a tooltip with no arrow</wa-tooltip>

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

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

HTML in Tooltips Jump to heading

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

Hover meI'm not just a tooltip, I'm a tooltip with HTML!

<wa-button id="rich-tooltip">Hover me</wa-button>
<wa-tooltip for="rich-tooltip">
  <div>I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!</div>
</wa-tooltip>

Setting a Maximum Width Jump to heading

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

  This tooltip will wrap after only 80 pixels.
Hover me

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

Slots Jump to heading

Learn more about using slots.

Name	Description
(default)	The tooltip's default slot where any content should live. Interactive content should be avoided.

Attributes & Properties Jump to heading

Learn more about attributes and properties.

Name	Description	Reflects
`placement` `placement`	The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport. Type `'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start' \| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end'` Default `'top'`
`disabled` `disabled`	Disables the tooltip so it won't show when triggered. Type `boolean` Default `false`
`distance` `distance`	The distance in pixels from which to offset the tooltip away from its target. Type `number` Default `8`
`open` `open`	Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. Type `boolean` Default `false`
`skidding` `skidding`	The distance in pixels from which to offset the tooltip along its target. Type `number` Default `0`
`showDelay` `show-delay`	The amount of time to wait before showing the tooltip when the user mouses in. Type `number` Default `150`
`hideDelay` `hide-delay`	The amount of time to wait before hiding the tooltip when the user mouses out.. Type `number` Default `0`
`trigger` `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. Type `string` Default `'hover focus'`

Methods Jump to heading

Learn more about methods.

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

Events Jump to heading

Learn more about events.

Name	Description
`wa-show`	Emitted when the tooltip begins to show.
`wa-after-show`	Emitted after the tooltip has shown and all animations are complete.
`wa-hide`	Emitted when the tooltip begins to hide.
`wa-after-hide`	Emitted after the tooltip has hidden and all animations are complete.

CSS custom properties Jump to heading

Learn more about CSS custom properties.

Name	Description
`--max-width`	The maximum width of the tooltip before its content will wrap.

CSS parts Jump to heading

Learn more about CSS parts.

Name	Description
`base`	The component's base wrapper, an `<wa-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.

Dependencies Jump to heading

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

<wa-popup>

Importing Jump to heading

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN

npm

React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/components/tooltip/tooltip.js';

To manually import this component from NPM, use the following code.

import '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';

To manually import this component from React, use the following code.

import '@awesome.me/webawesome/dist/react/tooltip';

Need a hand?

Report a bug

Ask for help

Getting Started

Resources

Components

Style Utilities

Layout

Patterns

Theming

Design Tokens

Tooltip

Examples Jump to heading

Placement Jump to heading

Click Trigger Jump to heading

Manual Trigger Jump to heading

Removing Arrows Jump to heading

HTML in Tooltips Jump to heading

Setting a Maximum Width Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

Methods Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

CSS parts Jump to heading

Dependencies Jump to heading

Importing Jump to heading

Getting Started

Resources

Components

Style Utilities

Layout

Patterns

Theming

Design Tokens

Tooltip

Examples Jump to heading #

Placement Jump to heading #

Click Trigger Jump to heading #

Manual Trigger Jump to heading #

Removing Arrows Jump to heading #

HTML in Tooltips Jump to heading #

Setting a Maximum Width Jump to heading #

Slots Jump to heading #

Attributes & Properties Jump to heading #

Methods Jump to heading #

Events Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Dependencies Jump to heading #

Importing Jump to heading #

Examples Jump to heading

Placement Jump to heading

Click Trigger Jump to heading

Manual Trigger Jump to heading

Removing Arrows Jump to heading

HTML in Tooltips Jump to heading

Setting a Maximum Width Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

Methods Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

CSS parts Jump to heading

Dependencies Jump to heading

Importing Jump to heading