Kann eine Tooltip in HTML-DOM nicht generieren? (Javascript)

Question

Ich möchte Tooltips für meine Listenelemente mit Javascript (mit HTML-DOM-Elementen) generieren. Was ist der einfachste Weg, dies zu tun? Ich versuche, eine Liste von Hyperlinks zu erstellen, aber wenn Sie die Maus über jeden Hyperlink bewegen, erscheint ein Tooltip.

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

} 

Unten ist das resultierende HTML mit meinem js generiert. Die Elemente sind die eigentlichen Tooltips für die Ankerelemente. Aber sie zeigen sich nicht.

Hier ist die Tooltip-Bibliothek ich zu verwenden Ich versuche: https://getmdl.io/components/index.html#tooltips-section

Answer 1

Wenn Sie wollen, dass der Standard von Screenreadern lesbar Tooltips,

anchor.title="This will popup"; 

oder

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

Beispiel. Maus über die Kugel und Maus über den 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

Sie sollten Tooltips sich mit einem Skript anstelle des Schreibens betrachten. Ich empfehle Tippy, die Sie finden here.

Wenn Sie Boostrap verwenden, dann sind auch Tooltips bereits integriert. Sie finden die Beschreibung here.