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();
}
});
document.addEventListener('floating-menu-hidden', function(evt) {
myAnalyticsLibrary.send({
action: 'Tooltip hidden',
id: evt.target.id,
});
});
| 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>
This tooltip variation does not use any JavaScript and should be used to define a word. For anything more advanced please use the main variation.
| Selector |
Description |
.bx--tooltip--definition__top |
A simple tooltip that is displayed above the trigger. |
.bx--tooltip--definition__bottom |
A simple tooltip that is displayed below the trigger. |
This tooltip variation does not use any JavaScript and is good for short single line of text describing an icon. No label should be added to this variation.
| Selector |
Description |
.bx--tooltip--icon__top |
A simple tooltip that is displayed above the trigger. |
.bx--tooltip--icon__bottom |
A simple tooltip that is displayed below the trigger. |
Links & Resources