Dynamic tooltip

Question

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 1

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>