titel attribute zum Tooltip machen

basti1012 · 4. August 2018

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.

Code

*[title]{
  display:none;
}

*[title]:hover{
  position:fixed;
  display:block;
  height:30px;
  font-size:24px;
  background:grey;
}

Alles anzeigen

Und mit oder und JS klappt das alles auch nicht richtig.

JavaScript

$(document).ready(function(){
        var jqueryTooltip ='<div id="tooltip"></div>';
        $('body').append(jqueryTooltip);
        $('*').hover(function(e){
           var title =$(this).attr('title'); 
           if(title !=''){
              $('#tooltip').html(title);
              var top = e.pageY + 20;
              var left = e.pageX + 20;
              $('#tooltip').css({ 'top':top, 'left':left,'display':'block'});
          }
       }).mousemove(function(e){
          var top1 = e.pageY + 20;
          var left1 = e.pageX + 20;
          $('#tooltip').css({ 'top':top1, 'left':left1});
       }).mouseout(function(){
          $('#tooltip').css('display','none');
       });
});

Alles anzeigen

Das ist alles irgendwie murks.

Hat das schon mal einer gemacht ,oder urgendwas im Netz gefunden ohne data() hinzufügen zu müßen und was auch laüft ,weil genau das wollte ich nicht ,ich wollte die vorhandenen title attributen dafür benutzen.

Arne Drews · 4. August 2018

Hi,

Da nimmste Dir sowas: https://pixelbar.be/blog/css-profi-tip-tooltip-attributen/ und änderst die Zeile

content: attr(data-tooltip);

in

content: attr(title);

basti1012 · 4. August 2018

Das kommt der sache schon näher,aber eigentlich suche ich nee möglichkeit den titel vom alles zu zeigen. Das begrenzt sich ja jetzt auf <a> und der classe="tooltip" . So müßte ich ja jetzt auch die ganze Hp ändern damit es passen würde.

Aber mal kucken vieleicht läst sich jetzt aus 2 Scripten eins machen wie ich mir das vorgestellt habe.

Kann man irgendie das hier ändern

Code

var title =$(this).attr('title'); 
           if(title !=''){
alert('title vorhanden');
}

Selbst wenn es keinen Title attribute gibt wird undefined ausgegeben und der alert schägt an. Versuche ich eine if Abfrage mit gleich undefined zu machen klappt das auch nicht.

Ziel ist es eine if abfrage zu machen das beim vorhanden Title ein container einzublenden,aber jetzt blendet er ihn auch ein wenn es kein title gibt

Arne Drews · 4. August 2018

JavaScript

var HasTitle = $(this).attr('title') != null;

basti1012 · 4. August 2018

Na toll. Da hätte ich drauf kommen können.

Mein Googeln zeigt mir das nur mit CSS den Originalen title ausblenden und gleichzeitig den neuen Style einbinden irgendwie alles nicht aufeinander passt.

Ich wollte nee Lösung finden, wo man vorhandene HP`s mit einem Tooltip ausstatten kann mit dem Title Text ,ohne Extra Data hinschreiben zu müssen oder sonst was.

Meine Lösung ist jetzt das geworden

https://basti1012.bplaced.net/…rdner=html-seminar&id=335

Darf ich mir eigentlich eigene Lösungen posten ??

Na ja ,ist jetzt mit Umweg ,aber das Endergebnis passt schon mal.

Vielleicht gibt es ja noch nee einfachere Lösung als diese?

Arne Drews · 4. August 2018

Zitat von basti1012

Ich wollte nee Lösung finden wo man vorhandene HP`s mit einen Tooltip ausstatten kann mit den Title text ,ohne Extra data hinschreiben zu müßen oder sonst was.

Genau das macht mein Link in #2 mit der minimalen dort gezeigten Anpassung. Wo ist da jetzt das Problem mit der Umsetzung?

basti1012 · 4. August 2018

ja der Code ist auf <a> und class="tooltip" . Der soll aber alle title anzeigen egal in welchen Tag es ist , und egal wie die classe heißt. So muß man ja trotzdem noch im html alles bzw paar sachen ändern und das wollte ich nicht.

Der soll mir diese Title anzeigen

Code

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

Der Originale Titel muß weg ,bzw der style angepasst werden .Ohne da jetzt classen in html zu schreiben,der html Code soll unberührt bleiben

Arne Drews · 5. August 2018

Wo genau ist jetzt Dein Problem, das auf weitere Elemente, wie <a> zu erweitern?!

basti1012 · 5. August 2018

Ich wusste jetzt nicht wie. Wenn ich das auf alles anwende, weil ja fast jeder Tag ein Title haben könnte ,kommt da nicht das Ergebnis raus wie ich es haben wollte.

* Link entfernt , weil existiert nicht mehr *

Ich glaube wir reden einander vorbei, wenn ich da ein class zugeben tue funktioniert es ja ,aber das will ich ja vermeiden

titel attribute zum Tooltip machen

Jetzt mitmachen!

Teilen