Tooltip

Tooltip directive provides advisory information for a component.

Variants

GEL provides designers with a tooltip that is displayed at the top of any element`

Demo

Guidance

• Tooltip should be as short as possible, ideally a one liner and single line.
• Tooltip should be displayed in hover state.
• Tooltip should be at a gap of spacer-2 with the element.
• Actionable icons/toolbar which does not have a accompanying text should have tooltip added to the icons/toolbar.
• Should remain in place when user moves cursor within the target element.
• The text inside a tooltip should always be center aligned.

When to use

• Use tooltip when an element requires additional information.
• Consider using tooltip on icon only buttons such as toolbar

Designer assets

figma

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

vue

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP