Published
Edited
Aug 18, 2022
Importers
1 star
Insert cell
Insert cell
Insert cell
initTooltips([tooltipAnchor])
Insert cell
function initTooltips(dependencies) {
mdcStyles();
document.querySelectorAll(`[data-mdc-tooltip]`)
.forEach((anchorEl) => {

const anchorSelection = d3.select(anchorEl);

const id = DOM.uid("tooltip").id;
// Remove any existing tooltip. Otherwise, tooltips for a given anchor will accumulate.
const tooltipId = anchorSelection.attr("aria-describedby");
document.getElementById(tooltipId)
?.remove()

// Add tooltip to document body.
const tooltipEl = htl.html`<div id="${id}" class="mdc-tooltip" role="tooltip" aria-hidden="true">
<div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
<span class="mdc-tooltip__label">${anchorSelection.attr("data-mdc-tooltip")}<span>
</div>
</div>`;
document.body.appendChild(tooltipEl);
anchorSelection
.attr("aria-describedby", id);

// Initialize tooltip.
const tooltip = new mdc.tooltip.MDCTooltip(tooltipEl);
tooltip.setTooltipPosition({ yPos: 1 })
})
}
Insert cell
import {mdcStyles} from "@kentr/material-components-web-styles"
Insert cell
mdc = mdcModule();
Insert cell
Insert cell
initTooltips([tooltipAnchor1])
Insert cell
import {mdcModule} from "@kentr/material-components-web-styles"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more