javascript - 无法在 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。这些元素是 anchor 元素的实际工具提示。但他们没有出现。

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

Answer 1

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

anchor.title="This will popup";

或

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

示例。将鼠标悬停在项目符号上并将鼠标悬停在链接上

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>