Create html elements inside tooltip for a chrome extension

October 3, 2022

I want to create an HTML element (a div) using javascript to use that as a tooltip.
I can create the simple element by doing:

const element = document.createElement("div");
element.id = "myID"

and that works fine…however, I want to add a table (and some other HTML) inside the tooltip, so I was trying to do

element.appendChild(childElement); //where the childElement is another document.createElement("") that contains all the HTML I want.

or:

element.insertAdjacentHTML('afterbegin', '<table></table>');

however, nothing happens. there’s no error, but it won’t append it either. Am I missing something?

If it matters, this is happening inside the contentScripts.js of a chrome extension I’m building.

EDIT

Full code of div creation:

const element = document.createElement("div");
    element.id = "tooltip-creation";
    element.classList.add("tooltip");

    const childElement = document.createElement("div");
    childElement.id = "data";
    
    //I've attempted to do .appendChild, innerHTML, and .insertAdjacentHTML (as can be seen here) and neither works but no error is given.

    element.appendChild(childElement);
    
    element.insertAdjacentHTML('afterbegin','<table border="1"><tr><td><strong>OMG</strong></td></tr></table>');

    element.innerHTML = "<table border="1"><tr><td><strong>OMG</strong></td></tr></table>";

Separately I have 2 functions that do:

document.addEventListener("mouseover", function(e){
    if (e.target.classList.contains("tooltip")) {
        createTooltip(e);
    }
});

document.addEventListener("mouseout", function(e){
    if (e.target.classList.contains("tooltip")) {
        removeAllTooltips();
    }
});

>Solution :

I think your issue is that you’re not actually appending the tooltip to anything. You need to append your element to a node that is already in the DOM. Here is a working example (without any CSS) that I got from your code, the only difference being that I appended the element node to an existing element in the DOM called root.

https://jsfiddle.net/irantwomiles/09o7vuj5/12/