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.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/orbit-tooltips/css/tooltips.min.css" />
Copy

Uncompressed CSS

<link rel="stylesheet" href="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

<div class="is-button-group">
  <button class="button tooltip tooltip--top" data-tooltip-content="Top">
    Top
  </button>
  <button class="button tooltip tooltip--top-left" data-tooltip-content="Top-left">
    Top-left
  </button>
  <button class="button tooltip tooltip--top-right" data-tooltip-content="Top-right">
    Top-right
  </button>
  <button class="button tooltip tooltip--bottom" data-tooltip-content="Bottom">
    Bottom
  </button>
  <button class="button tooltip tooltip--bottom-left" data-tooltip-content="Bottom-left">
    Bottom-left
  </button>
  <button class="button tooltip tooltip--bottom-right" data-tooltip-content="Bottom-right">
    Bottom-right
  </button>
  <button class="button tooltip tooltip--right" data-tooltip-content="Right">
    Right
  </button>
  <button class="button tooltip tooltip--left" data-tooltip-content="Left">
    Left
  </button>
</div>
</> Show code
Copy

Active state

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

No animation

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

<span class="tooltip tooltip--top has-no-animation" data-tooltip-content="Has no animation">Hover me</span>
Copy

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.

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