Html not working on css tooltip

Question

My css 3 tooltip (created folowing this tutorial) is showing this :

Name </br> Description

instead of

Name
Description

The html code used to create the tooltip has been made by my javascript script :

var DivItem = document.createElement("div");
var span = document.createElement("span");
var spanText = document.createTextNode(Name + "<br>" + Description;

span.appendChild(spanText);
span.className = "TooltipText";

DivItem.appendChild(span);
DivItem.className = "Tooltip";

MainDiv.appendChild(DivItem);

I need to use the javascript code here beacause i make an list of items (got from a json), and i need to have a tooltip to show more informations on the hovered item.

And your code won't run, you forgot to close the paranthesis in line 3 — elementzero23, Nov 02 '16 at 10:49

score 1 · Accepted Answer · answered Nov 02 '16 at 10:52

createTextNode, unsurprisingly, creates a text node.

If you want a br element, you need to create an element.

var span = document.createElement("span");
span.appendChild(document.createTextNode(Name));
span.appendChild(document.createElement("br"));
span.appendChild(document.createTextNode(Description));

score 0 · Answer 2 · answered Nov 02 '16 at 10:49

0

Instead of createTextNode you can use:

span.innerHTML = `${Name}<br>${Description}`

answered Nov 02 '16 at 10:49

emanuelbsilva

252
3
10

score 0 · Answer 3 · edited May 23 '17 at 12:16

0

Add with innerHTML of created element.You can achieve that reference

var DivItem = document.createElement("div");
    var span = document.createElement("span");
    span.innerHTML =Name + "<br>" + Description;
    span.className = "TooltipText";

    DivItem.appendChild(span);
    DivItem.className = "Tooltip";

    MainDiv.appendChild(DivItem);

edited May 23 '17 at 12:16

Community

1
1

answered Nov 02 '16 at 10:53

prasanth

22,145
4
29
53

score -1 · Answer 4 · answered Nov 02 '16 at 10:55

-1

you can not use text node to render html.instead you can use innerHTML

answered Nov 02 '16 at 10:55

Dnyanesh

51
6

Html not working on css tooltip

4 Answers4