vwc-tooltip 2.42.0
Install from the command line:
Learn more about npm packages
$ npm install @vonage/vwc-tooltip@2.42.0
Install via package.json:
"@vonage/vwc-tooltip": "2.42.0"
About this version
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.
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 is a description and therefor, the tooltip itself can not be interactive.
vwc-tooltip
contain only text.
be sure to add aria-describedby="the vwc-tooltip ID name"
on the tooltip trigger element for screen readers readability.
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" |
Property | Default | Description |
---|---|---|
--tooltip-inline-size |
240px | Controls the tooltip width |