Tooltip

A tooltip is used to inform the user about an element of the page or a feature, it is activated when the mouse is passed over this element, it can also be activated with keyboard hover gesture.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

Example

<button type="button" class="nj-btn" data-toggle="tooltip" data-tooltip-content="Basic tooltip">
  Hover me to trigger a tooltip 
</button>

Without Arrow

<button type="button" class="nj-btn" data-toggle="tooltip" data-tooltip-content="Tooltip without arrow" data-tooltip-arrow="false">
  Tooltip without arrow
</button>

With custom Html

<button type="button" class="nj-btn" data-toggle="tooltip" data-tooltip-content="<em>Tooltip</em> <u>with</u> <b>HTML</b>" data-tooltip-html="true">
  Tooltip with custom HTML
</button>

Placement

<div style="display: grid; justify-content: center; gap: 48px; padding: 56px;">
  <button type="button" class="nj-btn" data-toggle="tooltip" data-tooltip-placement="top" data-tooltip-content="Tooltip on top">
    Tooltip on top
  </button>
  <button type="button" class="nj-btn" data-toggle="tooltip" data-tooltip-placement="right" data-tooltip-content="Tooltip on right">
    Tooltip on right
  </button>
  <button type="button" class="nj-btn" data-toggle="tooltip" data-tooltip-placement="bottom" data-tooltip-content="Tooltip on bottom">
    Tooltip on bottom
  </button>
  <button type="button" class="nj-btn" data-toggle="tooltip" data-tooltip-placement="left" data-tooltip-content="Tooltip on left">
    Tooltip on left
  </button>
</div>

Inverse

<div style="display: grid; justify-content: center; background: var(--nj-core-color-ultramarine-800); gap: 48px; padding: 56px;">
  <button type="button" class="nj-btn nj-btn--inverse" data-toggle="tooltip" data-tooltip-inverse="true" data-tooltip-placement="top" data-tooltip-content="Tooltip on top">
    Tooltip on top
  </button>
  <button type="button" class="nj-btn nj-btn--inverse" data-toggle="tooltip" data-tooltip-inverse="true" data-tooltip-placement="right" data-tooltip-content="Tooltip on right">
    Tooltip on right
  </button>
  <button type="button" class="nj-btn nj-btn--inverse" data-toggle="tooltip" data-tooltip-inverse="true" data-tooltip-placement="bottom" data-tooltip-content="Tooltip on bottom">
    Tooltip on bottom
  </button>
  <button type="button" class="nj-btn nj-btn--inverse" data-toggle="tooltip" data-tooltip-inverse="true" data-tooltip-placement="left" data-tooltip-content="Tooltip on left">
    Tooltip on left
  </button>
</div>

Toggle

Overview