Tooltip directive provides advisory information for a component.
GEL provides designers with a tooltip that is displayed at the top of any element`
- 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