Carbon Design System

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 id="example-n7ovue79hkj-label" class="bx--tooltip__label">
  Tooltip label
  <div tabindex="0" aria-labelledby="example-n7ovue79hkj-label" data-tooltip-trigger data-tooltip-target="#example-n7ovue79hkj"
    role="button" class="bx--tooltip__trigger" aria-controls="example-n7ovue79hkj" 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 11V6.5h-2v1h1V11H6v1h4v-1zM8 3.5c-.4 0-.8.3-.8.8s.4.7.8.7.8-.3.8-.8-.4-.7-.8-.7z"></path><path d="M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z"></path></svg>
  </div>
</div>
<div id="example-n7ovue79hkj" data-floating-menu-direction="bottom" class="bx--tooltip"
  data-avoid-focus-on-open role="dialog" aria-describedby="example-n7ovue79hkj-body" aria-labelledby="example-n7ovue79hkj-label">
  <span class="bx--tooltip__caret"></span>
  <p id="example-n7ovue79hkj-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>

<div id="example-qqizuiuj38-label" class="bx--tooltip__label">
  Tooltip label
  <div tabindex="0" aria-labelledby="example-qqizuiuj38-label" data-tooltip-trigger data-tooltip-target="#example-qqizuiuj38"
    role="button" class="bx--tooltip__trigger" aria-controls="example-qqizuiuj38" 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 11V6.5h-2v1h1V11H6v1h4v-1zM8 3.5c-.4 0-.8.3-.8.8s.4.7.8.7.8-.3.8-.8-.4-.7-.8-.7z"></path><path d="M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z"></path></svg>
  </div>
</div>
<div id="example-qqizuiuj38" data-floating-menu-direction="bottom" class="bx--tooltip"
  data-avoid-focus-on-open role="dialog" aria-describedby="example-qqizuiuj38-body" aria-labelledby="example-qqizuiuj38-heading">
  <span class="bx--tooltip__caret"></span>
  <h4 id="example-qqizuiuj38-heading">Heading within a Tooltip</h4>
  <p id="example-qqizuiuj38-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>

<div id="example-w48y2lxjdck-label" class="bx--tooltip__label">
  Tooltip label
  <div tabindex="0" aria-labelledby="example-w48y2lxjdck-label" data-tooltip-trigger data-tooltip-target="#example-w48y2lxjdck"
    role="button" class="bx--tooltip__trigger" aria-controls="example-w48y2lxjdck" 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 11V6.5h-2v1h1V11H6v1h4v-1zM8 3.5c-.4 0-.8.3-.8.8s.4.7.8.7.8-.3.8-.8-.4-.7-.8-.7z"></path><path d="M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z"></path></svg>
  </div>
</div>
<div id="example-w48y2lxjdck" data-floating-menu-direction="bottom" class="bx--tooltip"
  data-avoid-focus-on-open role="dialog" aria-describedby="example-w48y2lxjdck-body" aria-label="Tooltip label">
  <span class="bx--tooltip__caret"></span>
  <p id="example-w48y2lxjdck-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>

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 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></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 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></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 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></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 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></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 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></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 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></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 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></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 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></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 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></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 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></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 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></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 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>

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">
  <div
    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)
  </div>
  <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">
  <span
    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)
  </span>
  <div class="bx--assistive-text" id="example-end" role="tooltip">Brief description of the dotted, underlined word above.</div>
</div>

Documentation

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.

// `#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

// `#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.

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

Tooltips & Toggletips

Edit this page on GitHub

Components: Toggle

Tooltip: Usage

Tooltip

Tooltip

Heading within a Tooltip

Icon tooltip

Definition tooltip

Documentation

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

Getting component class reference

ES2015

With pre-build bundle (`carbon-components.min.js`)

Instantiating

Attributes

Public Methods

Example - Showing tooltip

Options

Example - Changing menu position by 8 pixels vertically

Events

Example - Preventing click-to-open tooltip from being closed in a certain condition

Example - Notifying events of all click-to-open tooltips being hidden to an analytics library

Interactive tooltip

HTML

Definition tooltip

Icon tooltip

Links & Resources

Tooltip

Tooltip

Icon tooltip

Definition tooltip

Documentation

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

Getting component class reference

ES2015

With pre-build bundle (carbon-components.min.js)

Instantiating

Attributes

Public Methods

Example - Showing tooltip

Options

Example - Changing menu position by 8 pixels vertically

Events

Example - Preventing click-to-open tooltip from being closed in a certain condition

Example - Notifying events of all click-to-open tooltips being hidden to an analytics library

Interactive tooltip

HTML

Definition tooltip

Icon tooltip

Links & Resources

With pre-build bundle (`carbon-components.min.js`)