The Orbit Tooltips module is a standalone module that does not ship with the OrbitCSS framework and will need to be installed with one of the methods below.
You can install Orbit Tooltips with NPM.
npm install orbit-tooltips
Once installed, just import the module directly into your build.
@import './node_modules/orbit-tooltips/tooltips';
Use the jsDelivr CDN to include Orbit Tooltips directly into your project.
Compressed CSS.
https://cdn.jsdelivr.net/npm/orbit-tooltips/css/tooltips.min.css
Uncompressed CSS.
https://cdn.jsdelivr.net/npm/orbit-tooltips/css/tooltips.css
You can download the repository directly from Github.
https://github.com/OrbitCSS/orbit-tooltips/tree/master/css
You can add tooltips to any of your elements by combining the tooltip
class and the data-tooltip-content
attribute. Hovering the element will trigger the tooltip.
<button class="button tooltip tooltip--top" data-tooltip-content="I'm a tooltip">Hover me</button>
The following modifiers will alter the positioning of the tooltip. A position modifier must always be specified when using the tooltip
class.
tooltip--top
tooltip--top-left
tooltip--top-right
tooltip--bottom
tooltip--bottom-left
tooltip--bottom-right
tooltip--right
tooltip--left
The tooltip--active
modifier can be used to toggle the tooltip.
<span class="tooltip tooltip--active tooltip--top" data-tooltip-content="Active tooltip">Always active</span>
The has-no-animation
modifier will remove the transition effect when the tooltip is toggled.
If you installed OrbitCSS alongside Orbit Tooltips and are compiling your own Sass, you will have access to some color modifiers from the OrbitCSS color palette. You can access these colors with the tooltip--c-{color}
modifier, where color represents a key from the color palette.
<span class="button tooltip tooltip--top tooltip--c-primary" data-tooltip-content="Primary">Primary</span>
<span class="button tooltip tooltip--top tooltip--c-warning" data-tooltip-content="Warning">Warning</span>
<span class="button tooltip tooltip--top tooltip--c-info" data-tooltip-content="Info">Info</span>
<span class="button tooltip tooltip--top tooltip--c-danger" data-tooltip-content="Danger">Danger</span>
<span class="button tooltip tooltip--top tooltip--c-success" data-tooltip-content="Success">Success</span>
<span class="button tooltip tooltip--top tooltip--c-dark" data-tooltip-content="Dark">Dark</span>
<span class="button tooltip tooltip--top tooltip--c-night" data-tooltip-content="Night">Night</span>
<span class="button tooltip tooltip--top tooltip--c-light" data-tooltip-content="Light">Light</span>
<span class="button tooltip tooltip--top tooltip--c-white" data-tooltip-content="White">White</span>
<span class="button tooltip tooltip--top tooltip--c-light-grey" data-tooltip-content="Light grey">Light grey</span>
<span class="button tooltip tooltip--top tooltip--c-dark-grey" data-tooltip-content="Dark grey">Dark grey</span>
</> Show code The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.
| Variable | Type | Default Value |
|---|---|---|
| $tooltip-background | color | $black : #393939 |
| $tooltip-color | color | #ffffff |
| $tooltip-font-size | units | 0.75rem |
| $tooltip-line-height | unitless | 1.4 |
| $tooltip-max-width | units | 250px |
| $tooltip-padding | padding | 0.25rem 0.75rem |
| $tooltip-push | integer | 6 |
| $tooltip-radius | units | 0 |
| $tooltip-arrow-size | units | 4px |