Skip to main content


Tooltip directive provides advisory information for a component.


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

Tooltip types


Tooltip demo


  • 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

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact GEL Community.

Developer API

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