CSS Styling eines Tooltips in einem TH-Tag

Question

Ich versuche, einen Tooltip in einem jqgrid in einer über AngularJS gelieferten Seite zu stylen. Im Wesentlichen an anderen Stellen in der App benutze ich das Bootstrap-Tooltip-Styling. Ich kämpfe darum, dass dies im AngularJS-Teil funktioniert (möglicherweise, weil die Initialisierung nicht am richtigen Ort läuft). Ich dachte, ich könnte den Dreh wechseln und stattdessen versuchen, das Styling nachzuahmen.

Ich habe angefangen und habe ein sehr raues und bereites Styling bekommen, das fast wie ein PoC "funktioniert" (es braucht viel Arbeit, ich will sehen, ob es möglich ist, bevor ich diese Arbeit mache! Es ist hier in der Fiddle

ich habe 2 Fragen, die ich gefragt, ob jemand mit mir helfen könnte, bevor ich versuche, es aufzuräumen

1) gibt es eine Möglichkeit, den normalen Tooltip zu stoppen als auch erscheinen (ich dachte, dass ich den Tooltip wurde Styling aber ich scheine eine zweite hinzuzufügen!)

2) Gibt es eine Möglichkeit, es zu "schweben". In der Geige ist es nicht offensichtlich, aber in der jqgrid, wo das th-Element mehr strukturiert (begrenzt) ist, ist der css-Tooltip, den ich erstellt habe, im th-Element enthalten und hauptsächlich versteckt (wie es für das Element zu groß ist).

Ich denke, dies ist eine CSS-Frage mehr als eine Frage jqgrid, nur für den Fall, dass ich darauf hinweisen werde, kann ich nicht wirklich die Span-Technik in einigen Antworten geschrieben verwenden.

Danke.

Der Code in der Geige ist

<table> 
    <th title="This is a tooltip">John</th> 
    <th title="so is this">Albert</th> 
    <th title="And This">Spencer</th> 
</table> 

th[title]:hover:after { 
    content: attr(title); 
    background-color: #000; 
    color: #fff; 
    width: 120px; 
    text-align: center; 
    border-radius: 6px; 
    padding: 5px 0; 
    z-index: 1; 
    left: 50%; 
    top: 100%; 
    position: absolute; 
    margin-left: -60px; 
    margin-left: -5px; 
    border-width: 5px; 
    position: relative; 
    display: inline-block; 
    border-bottom: 1px dotted black; 
    border-style: solid; 
    border-color: #555 transparent transparent transparent; 
} 

Answer 1

Ja. Alles, was Sie tun müssen, ist vom Titelattribut zum Datentitel zu wechseln, so wäre es: content: attr(data-title); Dann aktualisieren Sie auch das th-Titelattribut entsprechend.