Html不能在css工具提示上工作

Html not working on css tooltip

本文关键字：工作 工具提示 css 不能 Html      更新时间：2023-09-26

我的css 3工具提示(按照本教程创建)显示如下:

Name </br> Description

代替

Name
Description

用于创建工具提示的html代码已由我的javascript脚本制作:

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

我需要在这里使用javascript代码，因为我使项目列表(从json获得)，我需要有一个工具提示来显示悬停项目的更多信息。

createTextNode，毫无疑问，创建了一个文本节点。

如果你想要一个br元素，你需要创建一个元素。

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

可以使用:

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

添加已创建元素的innerHTML。你可以实现引用

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

不能使用文本节点来呈现html。你可以使用innerHTML

相关文章：