Tooltips

Simple tooltips with pure CSS

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.

Install with NPM

You can install Orbit Tooltips with NPM.

npm install orbit-tooltips
Copy

Once installed, just import the module directly into your build.

@import './node_modules/orbit-tooltips/tooltips';
Copy

CDN links

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
Copy

Uncompressed CSS.

https://cdn.jsdelivr.net/npm/orbit-tooltips/css/tooltips.css
Copy

Github

You can download the repository directly from Github.

https://github.com/OrbitCSS/orbit-tooltips/tree/master/css
Copy

Basic use

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>
Copy

Positioning

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

Active state

The tooltip--active modifier can be used to toggle the tooltip.

Always active
<span class="tooltip tooltip--active tooltip--top" data-tooltip-content="Active tooltip">Always active</span>
Copy

No animation

The has-no-animation modifier will remove the transition effect when the tooltip is toggled.

Hover me

Colors

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.

Primary Warning Info Danger Success Dark Night Light White Light grey Dark grey
<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 
Copy

Variables

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