Tooltip

A tooltip enables you to display information about an element when the user places their cursor above it.

Use cases:

• providing further information about an element when the user hovers the cursor over it

Example

In the example below, if you place your cursor over the Hover me button, a tooltip is displayed.

Hover me

JD

Tooltip text

Genesis

Declaration

<rapid-tooltip></rapid-tooltip>

Usage

@customElement({
  name: 'my-element',
  template: html<MyElement>`
    <rapid-button id="anchor">Hover me</rapid-button>
    <rapid-tooltip anchor="anchor">
      <rapid-avatar shape="circle" fill="green" color="black">JD</rapid-avatar>
      <p>Tooltip text</p>
    </rapid-tooltip>
  `,
})
export class MyElement extends GenesisElement { }

React

Declaration

<rapid-tooltip></rapid-tooltip>

Usage

export function MyComponent() {
  return (
    <div>
      <rapid-button id="anchor">Hover me</rapid-button>
      <rapid-tooltip anchor="anchor">
        <rapid-avatar shape="circle" fill="green" color="black">JD</rapid-avatar>
        <p>Tooltip text</p>
      </rapid-tooltip>
    </div>
  )
}

Angular

Declaration

<rapid-tooltip></rapid-tooltip>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-component',
  template: `
    <rapid-button id="anchor">Hover me</rapid-button>
    <rapid-tooltip anchor="anchor">
      <rapid-avatar shape="circle" fill="green" color="black">JD</rapid-avatar>
      <p>Tooltip text</p>
    </rapid-tooltip>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MyComponent { }

API

API examples are shown with Genesis component syntax; the closing tag is not included.

Attributes

Attribute	Type	Description	Example
visible	boolean	Whether the tooltip is visible or not. If this is set to true, then the tooltip is always visible - regardless of where the cursor is. Otherwise, the tooltip is interactive; it will appear only when the user hovers over the anchored element.	<rapid-tooltip visible>
anchor	string	The id of the element the tooltip is anchored to	<rapid-tooltip anchor="button-id">
delay	number	The delay in milliseconds before a tooltip is shown after a hover event	<rapid-tooltip delay="300">
position	TooltipPosition	Controls the placement of the tooltip relative to the anchor. When the position is undefined, the tooltip is placed above or below the anchor, based on available space.	<rapid-tooltip position="top">
auto-update-mode	"anchor" | "auto"	Controls when the tooltip updates its position. 'anchor' only updates when the anchor is resized. 'auto' updates on scroll/resize events. Default: 'anchor'	<rapid-tooltip auto-update-mode="anchor">
horizontal-viewport-lock	boolean	Controls whether the tooltip always remains fully in the viewport on the horizontal axis. If set to true, the position is adjusted to stay within the bounds of the viewport, detaching from the anchor if necessary. This prevents overflow and clipping.	<rapid-tooltip horizontal-viewport-lock>
vertical-viewport-lock	boolean	Controls whether the tooltip always remains fully in the viewport on the vertical axis. If set to true, the position is adjusted to stay within the bounds of the viewport, detaching from the anchor if necessary. This prevents overflow and clipping.	<rapid-tooltip vertical-viewport-lock>

info

TooltipPosition = "top" | "right" | "bottom" | "left" | "start" | "end" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-start" | "top-end" | "bottom-start" | "bottom-end";

Properties

Property	Type	Description	Example
anchorElement	HTMLElement	The html element currently being used as an anchor. Manually setting this overrides the anchor attribute	<rapid-tooltip :anchorElement=${(x) => x.tooltipElementRef}>

Slots

Slot	Description
Default	The default slot where the tooltip content is placed.

Parts

Part	Description
tooltip	The tooltip element itself.

Events fired

Event	Type	Description	Example
dismiss	void	Fired when the tooltip is visible and escape key is pressed.	<rapid-tooltip @dismiss=${(x) => x.handleDismiss()}>

Events listened to

This component doesn't listen to any events.