动态工具提示

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需要一个空格...但是您将追加.info到您的input。您应该在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>