Skip to content
vwc-tooltip / 2.45.0

vwc-tooltip 2.45.0

Install from the command line:
Learn more about npm packages
$ npm install @vonage/vwc-tooltip@2.45.0
Install via package.json:
"@vonage/vwc-tooltip": "2.45.0"

About this version

vwc-tooltip

A Tooltip is a page overlay that provides additional information about an interacted target. It's commonly shown on mouse hover or focus.
A tooltip displays non-interactive clarifying text related to a trigger element.

Note that touch screen devices do not share the same pointer input events and may fail to show anything.

Consider avoiding the use of tooltip as it may fail to produce the same UX for ALL users. if must, contemplate on practices such as aria-describedby to add alternative experience to users who aren't able to interact with a control in the same manner sighted users do.

Using the Tooltip right

the trigger

The tooltip can be placed on interactive controls (things that can be clicked or focusable) such as:

  • button
  • checkbox
  • input text

The tooltip can't be placed on non-interactive element such as paragraph or plain div.
Do not target non-interactive controls as a tooltip's anchor (such as non-focusable / disabled elements). The absence of user interaction will prevent the tooltip from showing up.

the tooltip

The tooltip is a description and therefor, the tooltip itself can not be interactive.
vwc-tooltip contain only text.

Accessibility

be sure to add aria-describedby="the vwc-tooltip ID name" on the tooltip trigger element for screen readers readability.

Properties

Property Attribute Type Default
text text string | undefined
open open boolean false
anchor anchor string trigger popup ID
corner corner string "bottom"
styles CSSResult "style"

CSS Custom Properties

Property Default Description
--tooltip-inline-size 240px Controls the tooltip width

Details


Assets

  • vwc-tooltip-2.45.0.tgz

Download activity

  • Total downloads 4
  • Last 30 days 2
  • Last week 0
  • Today 0