无法在 HTML DOM 中生成工具提示？ (javascript)

Question

我想使用 Javascript（使用 HTML DOM 元素）为我的列表元素生成工具提示。最简单的方法是什么？我正在尝试生成超链接列表，但是当您将鼠标悬停在每个超链接上时，会弹出一个工具提示。

function print(string){
// Create a <li> element
  var node = document.createElement("LI");         

// Create an anchor element (hyperlink)
  var anchor = document.createElement("A");
  anchor.text = string;
  anchor.href = getLinkFromCert(string);


//I WANT TO GENERATE A TOOLTIP EITHER FOR MY ANCHOR ELEMENT OR FOR MY <LI> ELEMENT



// Append the anchor to <li>  
 node.appendChild(anchor);      

 // Append <li> to <ul> with id="myList"
 document.getElementById("myList").appendChild(node);    

}

下面是用我的 js 生成的结果 HTML。这些元素是锚元素的实际工具提示。但他们没有出现。

这是我尝试使用的工具提示库： https://getmdl.io/components/index.html#tooltips-section

Answer 1

您应该考虑使用脚本而不是自己编写工具提示。我推荐 tipsy，你会发现 here.

如果您使用的是 Boostrap，则还集成了工具提示。您找到描述 here.

Answer 2

如果您希望屏幕阅读器可读默认工具提示，

anchor.title="This will popup";

或

node.title="This will be an LI tooltip"

例子。将鼠标悬停在项目符号上，然后将鼠标悬停在 link

上

function getLinkFromCert() {}
function print(string) {
  // Create a <li> element
  var node = document.createElement("LI");
  node.title="LI title:"+string;
  
  // Create an anchor element (hyperlink)
  var anchor = document.createElement("A");
  anchor.text = string;
  anchor.href = getLinkFromCert(string);
  anchor.title="Anchor title:"+string;

  // Append the anchor to <li>  
  node.appendChild(anchor);

  // Append <li> to <ul> with id="myList"
  document.getElementById("myList").appendChild(node);
}

window.onload = function() {
  print("tooltip");
}

<ul id="myList"></ul>

无法在 HTML DOM 中生成工具提示？ (javascript)

Cannot generate a tooltip in HTML DOM? (javascript)

html

javascript

dom

tooltip