Alex Acquier Alex Acquier - 4 days ago 4
CSS Question

Dynamic tooltip

I am trying to develop a tooltip using dynamically populated string appended to my html file. I manage to print out the string with an alert box but it does not seem to show up when I am trying to use it as tooltip even though the string is appended to the html file but not showing. Find my code below
hmtl:



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);
}

.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;
}

<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

Your code is mostly CSS related. You're using the wrong selectors, like .button.info needs a space... but you're appending .info to your input. You should put .info after the input and use an adjacent sibling selector in your CSS. I also rewrote your jQuery to be a little more efficient and only create the .info box once.

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>