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.
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
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.
You can use tooltips in React by installing our react-component library and importing
For an alternative way of displaying discoverable information view our contextual menu component.