Tooltips
Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element on the screen.
They can be used to provide information about concepts/terms/actions that are not self-explanatory or well known.
Avoid:
Avoid:
Detached
In some cases you may need the tooltip element to exist outside of the element it is a tooltip for, in which case you can use the is-detached
class with the u-hide
utility, and JavaScript to set the desired position of the tooltip.
Import
To import just this component into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;
@include vf-p-tooltips;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
React
You can use tooltips in React by installing our react-component library and importing Tooltip
component.
See the documentation for our React Tooltip
component
Related
For an alternative way of displaying discoverable information view our contextual menu component.