liquidev
74baa61122
to accomplish this, I generalised emoji tooltips to a shared Tooltip class. in the long run I'd like to transform all existing `title=""` tooltips into these for stylistic consistency with the rest of the website, but this is good enough for now. I also ended up cleaning up some old code from before the /b rework.
31 lines
862 B
JavaScript
31 lines
862 B
JavaScript
// Emoji zoom-in functionality.
|
|
|
|
import { addSpell } from "treehouse/spells.js";
|
|
import { attachTooltip, Tooltip } from "treehouse/overlay.js";
|
|
|
|
function createEmojiTooltip(emoji, element) {
|
|
let tooltip = new Tooltip(element, "bottom");
|
|
tooltip.classList.add("tooltip-emoji");
|
|
|
|
let img = tooltip.appendChild(new Image());
|
|
img.src = element.src;
|
|
|
|
let description = tooltip.appendChild(document.createElement("p"));
|
|
description.textContent = emoji.emojiName;
|
|
|
|
return tooltip;
|
|
}
|
|
|
|
class Emoji {
|
|
constructor(element) {
|
|
this.emojiName = element.title;
|
|
|
|
// title makes the browser add a tooltip. We replace browser tooltips with our own,
|
|
// so remove the title.
|
|
element.title = "";
|
|
|
|
attachTooltip(element, () => createEmojiTooltip(this, element)).showOnHover();
|
|
}
|
|
}
|
|
|
|
addSpell("emoji", Emoji);
|