Create and animate tooltips simply, for dropdowns tooltips and titles tooltips. It works with vanilla javascript + html + css and with floating-ui dependency.
Floating-ui is needed for intelligy placement of tooltips.
webcimes-tooltip also comes with full support for web accessibility and screen readers.
Once the webcimes-tooltip javascript is defined, we can simply call the WebcimesTooltip class with the desired options.
Use the package manager npm to install webcimes-tooltip.
npm install webcimes-tooltipCompared to JS bundlers (like Webpack), using ESM in the browser requires you to use the full path and filename instead of the module name. You can use an importmap to resolve the arbitrary module names to complete paths (not needed if you use JS bundlers):
<html>
<head>
...
<script type="importmap">
{
"imports": {
"@floating-ui/dom": "./node_modules/@floating-ui/core/dist/floating-ui.core.esm.js",
"webcimes-tooltip": "./node_modules/webcimes-tooltip/dist/js/webcimes-tooltip.esm.js"
}
}
</script>
</head>
...Then import javascript module:
import { WebcimesTooltip } from "webcimes-tooltip";Or you can also set the full path directly in the import:
<html>
<head>
...
<script type="module">
// Import webcimes-tooltip
import { WebcimesTooltip } from "./node_modules/webcimes-tooltip/dist/js/webcimes-tooltip.esm.js";
...
</script>
</head>
...Or with JS bundlers (like Webpack) you can call directly the module :
import { WebcimesTooltip } from "webcimes-tooltip";You can directly load the udm module in the script tag:
<html>
<head>
...
<script src="./node_modules/webcimes-tooltip/dist/js/webcimes-tooltip.udm.js" type="text/javascript"></script>
</head>
...<link rel="stylesheet" href="./node_modules/webcimes-tooltip/dist/css/webcimes-tooltip.css">// Wait for dom content loaded or call WebcimesTooltip before the end of body
document.addEventListener("DOMContentLoaded", function()
{
// Set tooltip button
const tooltipButton = new WebcimesTooltip({
type: "button", // Type (button tooltip or title tooltip), default "button"
element: document.querySelector("button"), // Element (selector string or HTMLElement) for the tooltip
content: null, // Content element (selector string or HTMLElement) for the content of the tooltip, default null
setId: null, // set a specific id on the tooltip. default "null"
setClass: null, // set a specific class on the tooltip, default "null"
placement: "bottom", // Choose tooltip placement, default "bottom" for type "button" and "top" for type "title"
delay: 0, // Delay before show the tooltip, default 0
duration: 600, // Duration of animation for show the tooltip, default 600
arrow: true, // Generate an arrow for the tooltip, default true
style: null, // add extra css style to tooltip, default null
ariaLabel: null, // set aria-label for the tooltip, default null
beforeShow: () => {console.log("before show");}, // callback before show tooltip
afterShow: () => {console.log("after show");}, // callback after show tooltip
beforeHide: () => {console.log("before hide");}, // callback before hide tooltip
afterHide: () => {console.log("after hide");}, // callback after hide tooltip
});
// Set tooltip title
document.querySelectorAll("[title]").forEach((el) => {
const tooltipTitle = new WebcimesTooltip({
type: "title", // Type (button tooltip or title tooltip), default "button"
element: el, // Element (selector string or HTMLElement) for the tooltip
content: null, // Content element (selector string or HTMLElement) for the content of the tooltip, default null
setId: null, // set a specific id on the tooltip. default "null"
setClass: null, // set a specific class on the tooltip, default "null"
placement: 'top', // Choose tooltip placement, default "bottom" for type "button" and "top" for type "title"
delay: 400, // Delay before show the tooltip, default 0
duration: 600, // Duration of animation for show the tooltip, default 600
arrow: true, // Generate an arrow for the tooltip, default true
style: null, // add extra css style to tooltip, default null
ariaLabel: null, // set aria-label for the tooltip, default null
hideOnHover: true, // Hide the tooltip when the mouse hover the tooltip (only for type "title"), default true
beforeShow: () => {console.log("before show");}, // callback before show tooltip
afterShow: () => {console.log("after show");}, // callback after show tooltip
beforeHide: () => {console.log("before hide");}, // callback before hide tooltip
afterHide: () => {console.log("after hide");}, // callback after hide tooltip
});
});
});The type option can be set to button or title:
If set to button it will be used as dropdown tooltip, also immediately after the button we need to set the drop-down tooltip that will be used by the button:
<button data-tooltip-placement="bottom" data-tooltip-delay="0" data-tooltip-duration="600" data-tooltip-arrow="true" style="display:none;">My button</button>
<div>
My tooltip content
</div>Note that the div tag immediately following the button will be automatically hidden by webcimes-tooltip. However, to avoid the element briefly appearing before being hidden by the script, it's better to initially set display: none in your style attribute on the element. Once the script is loaded, the display style will be automatically removed.
If you prefer, you can also set the content option with a specific class or ID to target the content, eliminating the need to create an element immediately after the button.
For accessibility, you can also focus the button and open the dropdown tooltip after pressing the Enter or Space key. Then you can also close the dropdown tooltip by pressing the Esc or Tab key.
If set to title, the module will automatically replace the title attribute with data-tooltip-title.
<button title="My title" data-tooltip-placement="top" data-tooltip-delay="400" data-tooltip-duration="600" data-tooltip-arrow="true" data-tooltip-hide-on-hover="true">My button</button>If you prefer, you can also set the content option with a specific class or ID to target the content, eliminating the need to create a title attribut. However, to avoid the element briefly appearing before being hidden by the script, it's better to initially set display: none in your style attribute on the element. Once the script is loaded, the display style will be automatically removed.
For accessibility reasons, you can also automatically open the tooltip by focusing a natively focusable element like <button> or <input>.
If you want to open the tooltip with focus on a non-focusable element like <div> or <span>, you can define a tabindex="0" with a specific role to your element, ex:
<div title="My title" tabindex="0" role="button">My button</div>You can set aria label for your button or title reference directly with the aria-label attribute like this:
<button title="My title" aria-label="Label for my button">My button</button>If you want to set the aria-label for the tooltip, you can use the ariaLabel attribute like this:
const tooltip = new WebcimesTooltip({
ariaLabel: "Label for the tooltip", // set aria-label for the tooltip, default null
});The placement, delay, duration, arrow and hideOnHover attributes define the default attributes that will apply to all tooltips.
The attribute data-tooltip-placement, data-tooltip-delay, data-tooltip-duration, data-tooltip-arrow and data-tooltip-hide-on-hover are optionnals, and it permit to set individual options for each tooltips created. Or you can also define this option directly from the js instance WebcimesTooltip.
You can get the dom element of the current tooltip like this:
// Get the instance
const myTooltip = new WebcimesTooltip(...);
// Things
// Then get the dom element of the current tooltip
myTooltip.tooltip;Or you can get the reference element of the tooltip (used on element option):
// Get the instance
const myTooltip = new WebcimesTooltip(...);
// Things
// Then get the dom reference element of the current tooltip
myTooltip.tooltipRef;Or you can get the arrow element of the tooltip:
// Get the instance
const myTooltip = new WebcimesTooltip(...);
// Things
// Then get the dom element of the current tooltip arrow
myTooltip.tooltipArrow;But with the option type set to title only myTooltip.tooltipRef will work (because the tooltip title is created on mouse-in and destroyed on mouse-out).
Multiple events exist, which allow to interact with the tooltip at each step. You can use all events below:
const tooltip = new WebcimesTooltip({
beforeShow: () => {console.log("before show");}, // callback before show tooltip
afterShow: () => {console.log("after show");}, // callback after show tooltip
beforeHide: () => {console.log("before hide");}, // callback before hide tooltip
afterHide: () => {console.log("after hide");}, // callback after hide tooltip
});You can also use addEventListener for get the events from the instance like this:
// Get the instance
const myTooltip = new WebcimesTooltip(...);
// Create an event on the current tooltip
myTooltip.tooltipRef.addEventListener("afterHide", () => {
console.log("after hide");
});
// Create an event on the current tooltip
myTooltip.tooltip.addEventListener("afterHide", () => {
console.log("after hide");
});You can use myTooltip.tooltipRef or myTooltip.tooltip to attach it to addEventListener, both will have the same effect.
But with the option type set to title only myTooltip.tooltipRef will work to attach it to addEventListener (because the tooltip title is created on mouse-in and destroyed on mouse-out).
You can style tooltips with --tooltip-color, --tooltip-background, --tooltip-arrow-width, --tooltip-arrow-height and --tooltip-border-color.
.webcimes-tooltip
{
--tooltip-color: #fff;
--tooltip-background: #222;
--tooltip-border-color: #888;
--tooltip-arrow-width: 8px;
--tooltip-arrow-height: 8px;
}.webcimes-tooltip--button
{
--tooltip-color: #fff;
--tooltip-background: #222;
--tooltip-border-color: #888;
--tooltip-arrow-width: 8px;
--tooltip-arrow-height: 8px;
}.webcimes-tooltip--title
{
--tooltip-color: #fff;
--tooltip-background: #222;
--tooltip-border-color: #888;
--tooltip-arrow-width: 8px;
--tooltip-arrow-height: 8px;
}You can define the style of the select with css, but you can also use the style property which allows to directly add an additional style to the tooltip.
const myTooltip = new WebcimesTooltip({
style: "background:red; color:cyan;",
});