Computer Graphics & Visualization @ufrj.br
Published
Edited
May 14, 2022
Importers
demo = toolTipper(
html`<img src="https://picsum.photos/400/300" height=300 />`,
(x, y) => `tooltip: ${x},${y}`
)
function toolTipper(element, contentFunc = (x, y) => "", props = {}) {
const parent = htl.html`<div>`;
Object.assign(parent.style, {
position: "relative",
display: "inline-flex"
});
parent.append(element);
Object.assign(props, {
followCursor: true,
allowHTML: true,
content: contentFunc(0, 0)
});
const instance = tippy(parent, props);
element.onmousemove = element.onmouseenter = (e) => {
instance.setContent(contentFunc(e.offsetX, e.offsetY));
};
return parent;
}
tippy = require("tippy.js@6")
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.
