Question

我正在尝试使用动态填充的字符串附加到我的html文件来开发工具提示。我设法用警告框打印出字符串，但是当我尝试将其用作工具提示时它似乎没有出现，即使字符串被附加到html文件但没有显示。在下面找到我的代码 HMTL：

＆＃13;

function handler(ev){
	var counter = 0;
	var target = $(ev.target);
	var id= target.attr('id');
	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"}]; 
		if (counter<1){
			var target = $(ev.target);
			var id= target.attr('id');
			if (target.is(".button")) {
				for (i=0; i<moteJson.length; i++){
					if (moteJson[i].mote_id == id){
						var display = "<div class = 'info'><p>Mote_id:  " +moteJson[i].mote_id + "\nLocation:  " + moteJson[i].location + "\nPlatform:  " + moteJson[i].platform + "</p></div>";
						$("#"+id ).html(display);
						
					}  
				}
			}
		}
	counter++;
	}
	 $(".button").mouseleave(check);
}

＆＃13;

.button.info{
	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 {
	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 {
	visibility: visible;
    opacity: 1;
}

＆＃13;

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

＆＃13;

Answer 1

您的代码主要与CSS相关。您使用了错误的选择器，例如.button.info需要空格......但您将.info附加到input。您应该将.info放在input之后，并在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 {
	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>

动态工具提示

1 个答案: