Tooltip

Links to another html element and displays popup information when the user hovers.

Use cases:

• Provide extra information about another element when it's hovered

Example

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 shown with Genesis component syntax, and closing tag omitted.

Attributes

Attribute	Type	Description	Example
visible	boolean	Whether the tooltip is visible or not. If undefined tooltip is shown when anchor element is hovered	<rapid-tooltip visibile>
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 if the tooltip will always remain fully in the viewport on the horizontal axis	<rapid-tooltip horizontal-viewport-lock>
vertical-viewport-lock	boolean	Controls if the tooltip will always remain fully in the viewport on the vertical axis	<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.