Tooltip

Tooltip

Tooltip label
Tooltip label
Tooltip label
Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<!-- Using the trigger label as the tooltip label (can be repetitive for screen reader users) -->
<div id="example-p1jnfa1h8rf-label" class="bx--tooltip__label">
  Tooltip label
  <button aria-expanded="false" aria-labelledby="example-p1jnfa1h8rf-label" data-tooltip-trigger data-tooltip-target="#example-p1jnfa1h8rf"
    class="bx--tooltip__trigger" aria-controls="example-p1jnfa1h8rf" aria-haspopup="true">
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 11L8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11zM8 3.5c-.4 0-.8.3-.8.8S7.6 5 8 5c.4 0 .8-.3.8-.8S8.4 3.5 8 3.5z"></path><path d="M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z"></path></svg>
  </button>
</div>
<div id="example-p1jnfa1h8rf" aria-hidden="true" data-floating-menu-direction="bottom" class="bx--tooltip">
  <span class="bx--tooltip__caret"></span>
  <div class="bx--tooltip__content" tabindex="-1" role="dialog" aria-describedby="example-p1jnfa1h8rf-body" aria-labelledby="example-p1jnfa1h8rf-label">
    <p id="example-p1jnfa1h8rf-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
      needed please use a modal instead.</p>
    <div class="bx--tooltip__footer">
      <a href="#" class="bx--link">Learn More</a>
      <button class="bx--btn bx--btn--primary bx--btn--sm"
        type="button">Create</button>
    </div>
  </div>
  <!-- Note: focusable span allows for focus wrap feature within Tooltips -->
  <span tabindex="0"></span>
</div>

<!-- Tooltip with Rich Text (heading and body content) but no interactive elements -->
<div id="example-x0z7o1w63ei-label" class="bx--tooltip__label">
  Tooltip label
  <button aria-expanded="false" aria-labelledby="example-x0z7o1w63ei-label" data-tooltip-trigger data-tooltip-target="#example-x0z7o1w63ei"
    class="bx--tooltip__trigger" aria-controls="example-x0z7o1w63ei" aria-haspopup="true">
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 11L8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11zM8 3.5c-.4 0-.8.3-.8.8S7.6 5 8 5c.4 0 .8-.3.8-.8S8.4 3.5 8 3.5z"></path><path d="M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z"></path></svg>
  </button>
</div>
<div id="example-x0z7o1w63ei" aria-hidden="true" data-floating-menu-direction="bottom" class="bx--tooltip">
  <span class="bx--tooltip__caret"></span>
  <div class="bx--tooltip__content" tabindex="-1" role="dialog" aria-labelledby="example-x0z7o1w63ei-heading" aria-describedby="example-x0z7o1w63ei-body">
    <h4 id="example-x0z7o1w63ei-heading" class="bx--tooltip__heading">Heading within a Tooltip</h4>
    <p id="example-x0z7o1w63ei-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
      needed please use a modal instead.</p>
  </div>
  <span tabindex="0"></span>
</div>

<!-- Tooltip without visible label (not recommended for WCAG 2.1) -->
<div id="example-8g2iv9j0vdb-label" class="bx--tooltip__label">
  Tooltip label
  <div tabindex="0" aria-expanded="false" aria-labelledby="example-8g2iv9j0vdb-label" data-tooltip-trigger data-tooltip-target="#example-8g2iv9j0vdb"
    role="button" class="bx--tooltip__trigger" aria-controls="example-8g2iv9j0vdb" aria-haspopup="true">
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 11L8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11zM8 3.5c-.4 0-.8.3-.8.8S7.6 5 8 5c.4 0 .8-.3.8-.8S8.4 3.5 8 3.5z"></path><path d="M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z"></path></svg>
  </div>
</div>
<div id="example-8g2iv9j0vdb" aria-hidden="true" data-floating-menu-direction="bottom" class="bx--tooltip">
  <span class="bx--tooltip__caret"></span>
  <div class="bx--tooltip__content" tabindex="-1" role="dialog" aria-describedby="example-8g2iv9j0vdb-body" aria-label="Tooltip label">
    <p id="example-8g2iv9j0vdb-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
      needed
      please use a modal instead.</p>
    <div class="bx--tooltip__footer">
      <a href="#" class="bx--link">Learn More</a>
      <button class="bx--btn bx--btn--primary bx--btn--sm"
        type="button">Create</button>
    </div>
  </div>
  <span tabindex="0"></span>
</div>

Icon tooltip

start




center




end


Vanilla JS
React Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->
<p>start</p>
<br>
<button
  class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left bx--tooltip--align-start">
  <span class="bx--assistive-text">Filter</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path></svg>
</button>
<button
  class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-start">
  <span class="bx--assistive-text">Filter</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path></svg>
</button>
<button
  class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-start">
  <span class="bx--assistive-text">Filter</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path></svg>
</button>
<button
  class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--right bx--tooltip--align-start">
  <span class="bx--assistive-text">Filter</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path></svg>
</button>
<br>
<br>
<p>center</p>
<br>
<button class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left">
  <span class="bx--assistive-text">Filter</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path></svg>
</button>
<button class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top">
  <span class="bx--assistive-text">Filter</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path></svg>
</button>
<button class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom">
  <span class="bx--assistive-text">Filter</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path></svg>
</button>
<button class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--right">
  <span class="bx--assistive-text">Filter</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path></svg>
</button>
<br>
<br>
<p>end</p>
<br>
<button
  class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left bx--tooltip--align-end">
  <span class="bx--assistive-text">Filter</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path></svg>
</button>
<button
  class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-end">
  <span class="bx--assistive-text">Filter</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path></svg>
</button>
<button
  class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-end">
  <span class="bx--assistive-text">Filter</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path></svg>
</button>
<button
  class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--right bx--tooltip--align-end">
  <span class="bx--assistive-text">Filter</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path></svg>
</button>

Definition tooltip



Vanilla JS
React Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->
<div class="bx--tooltip--definition bx--tooltip--a11y">
  <button aria-describedby="example-start"
    class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-start">
    Definition Tooltip (start aligned)
  </button>
  <div class="bx--assistive-text" id="example-start" role="tooltip">Brief description of the dotted, underlined word
    above.</div>
</div>
<br>
<div class="bx--tooltip--definition bx--tooltip--a11y">
  <button aria-describedby="example-center"
    class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-center">
    Definition Tooltip (center aligned)
  </button>
  <div class="bx--assistive-text" id="example-center" role="tooltip">Brief description of the dotted, underlined word
    above.</div>
</div>
<br>
<div class="bx--tooltip--definition bx--tooltip--a11y">
  <button aria-describedby="example-end"
    class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-end">
    Definition Tooltip (end aligned)
  </button>
  <div class="bx--assistive-text" id="example-end" role="tooltip">Brief description of the dotted, underlined word
    above.</div>
</div>

Documentation

JavaScript (Applied only to click-to-open tooltip)

Getting component class reference

ES2015
import { Tooltip } from 'carbon-components';
With pre-build bundle (carbon-components.min.js)
var Tooltip = CarbonComponents.Tooltip;

Instantiating

// `#my-tooltip-trigger` is an element with `[data-tooltip-trigger]` attribute
Tooltip.create(document.getElementById('my-tooltip-trigger'));

Attributes

Name Param Description
data-tooltip-target Any unique CSS selector The selector, typically an id, to find the tooltip corresponding to the trigger.
data-tooltip-direction left, top, right, or bottom Setting this attribute overrides the directions set by this.options.tooltipDirection

Public Methods

Name Params Description
show Shows the tooltip.
hide Hides the tooltip.
release Deletes the instance and removes document event listeners.
Example - Showing tooltip
// `#my-tooltip-trigger` is an element with `[data-tooltip-trigger]` attribute
var tooltipInstance = Tooltip.create(
  document.getElementById('my-tooltip-trigger')
);
tooltipInstance.show();

Options

Option Default Selector Description
selectorInit [data-tooltip-trigger] The CSS selector to find the tooltip.
objMenuOffset { top: 10, left: 0 } An object containing the top and left offset values in px
Example - Changing menu position by 8 pixels vertically
// `#my-tooltip-trigger` is an element with `[data-tooltip-trigger]` attribute
Tooltip.create(document.getElementById('my-tooltip-trigger'), {
  objMenuOffset(menuBody, direction) {
    const { objMenuOffset: offset } = Tooltip.options;
    const { top, left } =
      typeof offset !== 'function' ? offset : offset(menuBody, direction);
    return {
      top: top + 8,
      left,
    };
  },
});

Events

Event Name Description
'floating-menu-beingshown' The custom event fired before the menu gets open.
'floating-menu-shown' The custom event fired after the menu gets open.
'floating-menu-beinghidden' The custom event fired before the menu gets closed.
'floating-menu-hidden' The custom event fired after the menu gets closed.
Example - Preventing click-to-open tooltip from being closed in a certain condition
document.addEventListener('floating-menu-beinghidden', function(evt) {
  if (myApplication.shouldTooltipKeptOpen(evt.target)) {
    evt.preventDefault();
  }
});
Example - Notifying events of all click-to-open tooltips being hidden to an analytics library
document.addEventListener('floating-menu-hidden', function(evt) {
  myAnalyticsLibrary.send({
    action: 'Tooltip hidden',
    id: evt.target.id,
  });
});

Interactive tooltip

Interactive tooltip should be used if there are actions a user can take in the tooltip (e.g. a link or a button). For more regular use case, e.g. giving the user more text information about something, use definition tooltip or icon tooltip.

Selector Description
.bx--tooltip__trigger--bold Modifier class to make label bold.

HTML

By default, the tooltip (.bx--tooltip) goes right under <body>. You can change the behavior by adding data-floating-menu-container to one of the DOM ancestors of the tooltip's original location. For example, if you have HTML structure like below, the menu body will go under the second <div>:

<body>
  <div>
    <div data-floating-menu-container>
      <div>
        <div class="bx--tooltip__label" ...>
          Tooltip label
          <div
            tabindex="0"
            data-tooltip-trigger
            data-tooltip-target="#unique-tooltip"
            class="bx--tooltip__trigger"
            ...
          >
            ...
          </div>
        </div>
        <div
          id="unique-tooltip"
          data-floating-menu-direction="bottom"
          class="bx--tooltip"
          ...
        >
          <span class="bx--tooltip__caret"></span> ...
        </div>
      </div>
    </div>
  </div>
</body>

Definition tooltip

Definition tooltip is for regular use case of tooltip, e.g. giving the user more text information about something, like defining a word. This works better than the interactive tooltip in regular use cases because the info icon used in interactive tooltip can be repetitive when it’s shown several times on a page. Definition tooltip does not use any JavaScript. If there are actions a user can take in the tooltip (e.g. a link or a button), use interactive tooltip.

Selector Description
.bx--tooltip--top A simple tooltip that is displayed above the trigger.
.bx--tooltip--bottom A simple tooltip that is displayed below the trigger.

Icon tooltip

Icon tooltip is for short single line of text describing an icon. Icon tooltip does not use any JavaScript. No label should be added to this variation. If there are actions a user can take in the tooltip (e.g. a link or a button), use interactive tooltip.

Selector Description
.bx--tooltip--top A simple tooltip that is displayed above the trigger.
.bx--tooltip--right A simple tooltip that is displayed to the right of the trigger.
.bx--tooltip--bottom A simple tooltip that is displayed below the trigger.
.bx--tooltip--left A simple tooltip that is displayed to the left of the trigger.

Links & Resources

Edit this page on GitHub
Previous
Components: Toggle
Next
Tooltip: Usage