Info-bulle dynamique

Question

J'essaie de développer une info-bulle en utilisant une chaîne remplie dynamiquement ajoutée à mon fichier html. Je parviens à imprimer la chaîne avec une boîte d'alerte, mais il ne semble pas apparaître lorsque j'essaie de l'utiliser comme info-bulle même si la chaîne est ajoutée au fichier html mais ne s'affiche pas. Trouver mon code ci-dessous 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

Votre code est principalement associé à CSS. Vous utilisez les mauvais sélecteurs, comme .button.info a besoin d'un espace ... mais vous ajoutez .info à votre input. Vous devez mettre .info après le input et utiliser un sélecteur de frère adjacent dans votre CSS. J'ai également réécrit votre jQuery pour être un peu plus efficace et créer seulement la boîte .info une fois.

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>