3.0.0-alpha.4 Alpha
Light Dark Light Dark System Search /

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

Placement

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

top-start top top-end left-start right-start left right left-end right-end bottom-start bottom bottom-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

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

Click to Toggle Click 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

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

Toggle Manually This 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

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 Arrow This 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

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 me
I'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

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>

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.

This is a tooltip No Hoist This is a tooltip Hoist 
<div class="tooltip-hoist">
  <wa-tooltip for="no-hoist">This is a tooltip</wa-tooltip>
  <wa-button id="no-hoist">No Hoist</wa-button>

  <wa-tooltip for="hoist" hoist>This is a tooltip</wa-tooltip>
  <wa-button id="hoist">Hoist</wa-button>
</div>

<style>
  .tooltip-hoist {
    position: relative;
    overflow: hidden;
    border: solid 2px var(--wa-color-surface-border);
    padding: var(--wa-space-m);
  }
</style>

Slots

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

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'
hoist
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.
Type boolean
Default false

Methods

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

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

Name Description
--background-color
The tooltip's background color.
--border-radius
The radius of the tooltip's corners.
--content-color
The color of the tooltip's content.
--max-width
The maximum width of the tooltip before its content will wrap.
--padding
The padding within the tooltip.
--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.

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

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

Importing

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-alpha.4/dist/components/tooltip/tooltip.js';
 Coming soon! Coming soon!
    No results