ダイナミックツールチップ

Question

私は私のhtmlファイルに追加し、動的に取り込まれた文字列を使用してツールチップを開発しようとしています。私はアラートボックスで文字列を印刷することができますが、文字列がhtmlファイルに追加されていても表示されていなくても、ツールチップとして使用しようとしているときに表示されません。 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

あなたのコードは、主にCSS関連しています。 .button.infoは、スペースを必要とするようにあなたは、間違ったセレクタを使用している...しかし、あなたはあなたのinputから.infoを追加しています。 inputの後ろに.infoを置き、CSS内の隣接する兄弟セレクタを使用する必要があります。私はあなたのjQueryをもう少し効率的に書き直して、.infoボックスを一度しか作成しませんでした。

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>