Dynamische Tooltip

Question

Ich versuche, eine QuickInfo zu entwickeln, die dynamisch aufgefüllte Zeichenfolge an meine HTML-Datei angehängt. Ich schaffe es, den String mit einer Alarmbox auszudrucken, aber es scheint nicht zu erscheinen, wenn ich versuche, es als Tooltip zu verwenden, obwohl der String an die HTML-Datei angehängt wird, aber nicht angezeigt wird. Finden Sie meinen Code unten HMTL:

function handler(ev){ 
 
\t var counter = 0; 
 
\t var target = $(ev.target); 
 
\t var id= target.attr('id'); 
 
\t function check(ev){ 
 
     var moteJson = [{"mote_id":101, "location": "qwert", "platform":"x1"}, {"mote_id":102, "location": "qwert", "platform":"x2"}, {"mote_id":103, "location": "qwert", "platform":"x3"}]; 
 
\t \t if (counter<1){ 
 
\t \t \t var target = $(ev.target); 
 
\t \t \t var id= target.attr('id'); 
 
\t \t \t if (target.is(".button")) { 
 
\t \t \t \t for (i=0; i<moteJson.length; i++){ 
 
\t \t \t \t \t if (moteJson[i].mote_id == id){ 
 
\t \t \t \t \t \t var display = "<div class = 'info'><p>Mote_id: " +moteJson[i].mote_id + "\nLocation: " + moteJson[i].location + "\nPlatform: " + moteJson[i].platform + "</p></div>"; 
 
\t \t \t \t \t \t $("#"+id).html(display); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t counter++; 
 
\t } 
 
\t $(".button").mouseleave(check); 
 
}

.button.info{ 
 
\t visibility: hidden; 
 
    width: 120px; 
 
    background-color: #555; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 125%; 
 
    left: 50%; 
 
    margin-left: -60px; 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
} 
 

 
.button.info::after { 
 
\t content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: #555 transparent transparent transparent; 
 
} 
 

 
.button:hover .info { 
 
\t visibility: visible; 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#GFDisplay"><input type="button" value="104" name="104" id="104" class="button" onmouseover="handler(this)" style="position: absolute; left: 40px; top: 40px; background-color: green;"></a>

Answer 1

Ihr Code meist CSS verwandt ist. Sie verwenden die falschen Selektoren, wie .button.info benötigt ein Leerzeichen ... aber Sie fügen .info zu Ihrem input hinzu. Sie sollten .info nach dem input setzen und einen benachbarten Geschwisterselektor in Ihrem CSS verwenden. Ich habe auch Ihre jQuery neu geschrieben, um ein wenig effizienter zu sein und nur die .info Box einmal zu erstellen.

function handler(el) { 
 
    var target = $(el); 
 
    var id = target.attr("id"); 
 
    if (target.is(".button")) { 
 
    if (!target.siblings(".info").length) { 
 
     var display = $("<div class = 'info'><p>Mote_id:</p></div>"); 
 
     target.after(display); 
 
     var t = setTimeout(function() { 
 
     display.addClass('show'); 
 
     },50) 
 
    } 
 
    } 
 
}

.info { 
 
    width: 120px; 
 
    background-color: #555; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 100%; 
 
    left: 50%; 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
} 
 

 
.button + .info::after { 
 
\t content: ""; 
 
    position: absolute; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: #555 transparent transparent transparent; 
 
} 
 

 
.button:hover + .info.show { 
 
    opacity: 1; 
 
} 
 

 
.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="tooltip" href="#GFDisplay"><input type="button" value="104" name="104" id="104" class="button" onmouseover="handler(this)" style="position: absolute; left: 40px; top: 40px; background-color: green;"></a>