无法在HTML DOM中生成工具提示？ （javascript）

Question

I would like to generate tooltips for my list elements using Javascript (using HTML DOM elements). What is the easiest way to do this? I am trying to generate a list of Hyperlinks, but when you mouse over each Hyperlink a tooltip pops up.

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

}

Below is the resulting HTML generated with my js. The elements are the actual tooltips for the anchor elemements. But they are not showing up.

Here is the tooltip library I am trying to use: https://getmdl.io/components/index.html#tooltips-section

Answer 1

If you want the default tooltips readable by screen readers,

anchor.title="This will popup";

or

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

Example. Mouse over the bullet and mouse over the 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> 

Answer 2

You should consider using a script instead of writing tooltips yourself. I recommend tipsy, which you find here .

If you are using Boostrap, then there are also tooltips already integrated. You find the description here .