Tooltip

<quiet-tooltip>

stable

since 1.0

Tooltips provide additional information when the user hovers or focuses on an element.

Tooltips follow the ARIA APG tooltip pattern for accessibility. They show on hover and on focus. A transparent "safe polygon" is drawn between the tooltip and its anchor element to allow mouse users to hover over the tooltip without closing it. Only one tooltip will be visible on the page at a time. Tooltips are not be shown when the pointer type is touch.

              Hover over me
              I'm a tooltip
            

<quiet-button id="tooltip__overview">Hover over me</quiet-button>
<quiet-tooltip for="tooltip__overview">I'm a tooltip</quiet-tooltip>

Due to platform limitations, some Quiet components are treated differently when used as tooltip anchors, but they will still be announced as expected by screen readers.

Examples Jump to heading

Assigning an anchor Jump to heading

Tooltip anchors must be interactive/focusable elements such as buttons, links, etc. Use the for attribute on the tooltip to link it to the anchor's id. Do not include interactive elements inside your tooltips, as they won't be accessible to users.

Quiet button with tooltip

This is a Quiet button

This is a native button

Link with tooltip

This is a link

<quiet-button id="tooltip__anchor-button">Quiet button with tooltip</quiet-button>
<quiet-tooltip for="tooltip__anchor-button">This is a Quiet button</quiet-tooltip>

<br><br>

<button id="tooltip__anchor-native-button">Native button with tooltip</button>
<quiet-tooltip for="tooltip__anchor-native-button">This is a native button</quiet-tooltip>

<br><br>

<a href="#" id="tooltip__anchor-link">Link with tooltip</a>
<quiet-tooltip for="tooltip__anchor-link">This is a link</quiet-tooltip>

The anchor element must be in the DOM when the tooltip is connected, otherwise the tooltip won't be attached and a warning will be shown in the console.

Placement Jump to heading

Use the placement attribute to change the preferred location of the tooltip in reference to its anchor. The tooltip will shift to a more optimal location if the preferred placement doesn't have enough room. The default placement is top.

              Top
              I'm on the top

              Bottom
              I'm on the bottom

              Left
              I'm on the left 

              Right
              I'm on the right
            

<quiet-button id="tooltip__top">Top</quiet-button>
<quiet-tooltip for="tooltip__top" placement="top">I'm on the top</quiet-tooltip>

<quiet-button id="tooltip__bottom">Bottom</quiet-button>
<quiet-tooltip for="tooltip__bottom" placement="bottom">I'm on the bottom</quiet-tooltip>

<quiet-button id="tooltip__left">Left</quiet-button>
<quiet-tooltip for="tooltip__left" placement="left">I'm on the left </quiet-tooltip>

<quiet-button id="tooltip__right">Right</quiet-button>
<quiet-tooltip for="tooltip__right" placement="right">I'm on the right</quiet-tooltip>

Distance Jump to heading

You can change the distance of the tooltip from the anchor by setting the distance attribute to the desired number of pixels.

              Near
              I'm so near

              Far
              I'm so far
            

<quiet-button id="tooltip__distance-near">Near</quiet-button>
<quiet-tooltip for="tooltip__distance-near" distance="0">I'm so near</quiet-tooltip>

<quiet-button id="tooltip__distance-far">Far</quiet-button>
<quiet-tooltip for="tooltip__distance-far" distance="30">I'm so far</quiet-tooltip>

Open and close delays Jump to heading

Tooltips allow a brief duration before opening and closing when hovering in and out with the mouse. You can control these value by setting the open-delay and close-delay attributes to the desired number of milliseconds.

              No delay
              I have no delay whatsoever

              Long delay
              I have a long delay to open and close
            

<quiet-button id="tooltip__no-delay">No delay</quiet-button>
<quiet-tooltip for="tooltip__no-delay" open-delay="0" close-delay="0">I have no delay whatsoever</quiet-tooltip>

<quiet-button id="tooltip__long-delay">Long delay</quiet-button>
<quiet-tooltip for="tooltip__long-delay" open-delay="500" close-delay="500">I have a long delay to open and close</quiet-tooltip>

Changing the arrow size Jump to heading

You can change the size of the tooltip's arrow with the --arrow-size custom property. Set it to 0 to remove the arrow.

              Big arrow
              I have a big arrow

              No arrow
              I don't have an arrow
            

<quiet-button id="tooltip__big-arrow">Big arrow</quiet-button>
<quiet-tooltip for="tooltip__big-arrow" style="--arrow-size: 8px;">I have a big arrow</quiet-tooltip>

<quiet-button id="tooltip__no-arrow">No arrow</quiet-button>
<quiet-tooltip for="tooltip__no-arrow" style="--arrow-size: 0;">I don't have an arrow</quiet-tooltip>

Setting a max width Jump to heading

Use the --max-width custom property to change the maximum width of the tooltip.

              Hover over me
              
                I'm a tooltip with a lot of content. So much, in fact, that it will wrap to the next line.

<quiet-button id="tooltip__max-width">Hover over me</quiet-button>
<quiet-tooltip for="tooltip__max-width" style="--max-width: 160px;">
  I'm a tooltip with a lot of content. So much, in fact, that it will wrap to the next line.
</quiet-tooltip>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-tooltip> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/tooltip/tooltip.js';

To manually import <quiet-tooltip> from npm, use the following code.

import '@quietui/quiet/dist/components/tooltip/tooltip.js';

Slots Jump to heading

Tooltip supports the following slots. Learn more about using slots

Name	Description
(default)	The tooltip's content. Do not include interactive elements such as button, links, etc. as they won't be accessible to users inside the tooltip.

Properties Jump to heading

Tooltip has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute	Description	Type	Default
`for`	The ID of the tooltip's anchor element. This must be an interactive/focusable element such as a button and it must be in the same document as the tooltip.	`string`
`open`	Shows or hides the tooltip.	`boolean`	`false`
`placement`	The placement of the tooltip in reference to the anchor. The menu will shift to a more optimal location if the preferred placement doesn't have enough room.	`'top' 'top-start' 'top-end' 'bottom' 'bottom-start' 'bottom-end' 'right' 'right-start' 'right-end' 'left' 'left-start' 'left-end'`	`'top'`
`distance`	The distance of the tooltip from its anchor.	`number`	`8`
`offset`	The offset of the tooltip along its trigger.	`number`	`0`
`openDelay` `open-delay`	The number of milliseconds to wait before opening the tooltip when hovering in.	`number`	`50`
`closeDelay` `close-delay`	The number of milliseconds to wait before closing the tooltip when hovering out.	`number`	`100`
`activation`	By default, the tooltip automatically shows when the user focuses or hovers over the anchor. If you want to control the tooltip programmatically, set this to `manual`.	`'auto' 'manual'`	`'auto'`

Events Jump to heading

Tooltip dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

Name	Description
`quiet-open`	Emitted when the tooltip is instructed to open but before it is shown.
`quiet-opened`	Emitted when the tooltip has opened and the animation has completed.
`quiet-close`	Emitted when the tooltip is dismissed but before it is hidden.
`quiet-closed`	Emitted when the tooltip has closed. and the animation has completed.

CSS custom properties Jump to heading

Tooltip supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--arrow-size`	The size of the arrow. Set this to `0` to hide the arrow.	`0.3125rem`
`--max-width`	The maximum width the tooltip can be before wrapping.	`20rem`
`--show-duration`	The duration of the show/hide animation.	`100ms`

CSS parts Jump to heading

Tooltip exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name	Description	CSS selector
`tooltip`	The element that powers the tooltip.	`::part(tooltip)`
`content`	The element that wraps the tooltip's content.	`::part(content)`
`arrow`	The tooltip's arrow. To change the arrow's size, use `--arrow-size` instead.	`::part(arrow)`

Custom States Jump to heading

Tooltip has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states

Name	Description	CSS selector
`open`	Applied when the tooltip is open.	`:state(open)`

Tooltip

Examples Jump to heading #

Assigning an anchor Jump to heading #

Placement Jump to heading #

Distance Jump to heading #

Open and close delays Jump to heading #

Changing the arrow size Jump to heading #

Setting a max width Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

Properties Jump to heading #

Events Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Custom States Jump to heading #