treehouse/static/js/emoji.js

// 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);