titel attribute zum Tooltip machen

Ich wollte, anstatt für jedes Feld ein Tooltip Text zu erstellen und so ,den vorhandenen Title benutzen. Über CSS bekomme ich es nicht richtig hin. Hat das schon mal einer gemacht ,oder irgendwas im Netz gefunden ohne Data() hinzufügen zu müssen und was auch läuft ,weil genau das wollte ich nicht ,ich wollte die vorhandenen title Attributen dafür benutzen.

Der hier verwendete Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> #tooltip{ position:fixed; top:0; left:0; border:2px solid red; background:green; display:none; } li,i,span,a{ margin:50px; } body{ padding:50px; } </style> <body> <a href="http://example.com/" title="Das a hat einen title attribut">mouseover me</a> <span title="Ich habe auch einen Title">SPAN</span> <li title="Li können auch einen Title besitzen">Bin dabei LI</li> <i title="Ich infomiere als ein I">I spielt mit</i> </body> <script> var Tooltip = $('<div id="tooltip"></div>'); $('body').append(Tooltip); $('*').hover(function(e){ title=$(this).attr('title'); if(title==undefined){ }else{ kill=$(this).attr('title'); if(kill==''){ }else{ $(this).data('title',title); $(this).attr('title',''); } title1=$(this).data('title'); $('#tooltip').html(title1).css('display','block'); var top = e.pageY + 20; var left = e.pageX + 20; $('#tooltip').css({'top':top+'px','left':left+'px'}); } }).mouseout(function(){ $('#tooltip').css('display','none'); }) </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!