Jquery UI Tooltip not able to hide

Question

I have two button + and - . When I click on + button I am adding one div in parent div and want to show tooltip on that div when I click again on + button then I am adding again one div and want to show tooltip on second div only. It's same for upto 7 div.

Currently I am doing same but when I add more than one div tooltip will not hide for previous button and will still there. So at end I am seeing all 7 tooltip but I supposed to see last div tooltip only.

I tried to hide it after some delay but even it's not working.

Here is my code.

function init(){
for(var divCount = 1; divCount <= fanSpeed; divCount++){
    $('#temperature_bar').append('<div style="float:left" data-tooltip-id="'+divCount+'" id="speed_"'+divCount +'" class="trigger climate-fan-bar" onclick="\buttonTempraturePressed(this.id)\" title="<div class="row row-thumbnail" id="box-search"><div class="thumbnail text-center"><img width="50" height="50" src="images/fan_speed_bg_center_popup.png" class="img-responsive"><div class="caption"><span class="tooltip-text-size">' + divCount + '</span></div></div></div></div>' ); 
    showTooltips("speed_"+divCount);
}
}

function showTooltips(clicked_id){
        //show
        $(clicked_id).on('click', '.trigger', function () {
            $(this).addClass("on");
                $(this).tooltip({
                hide: { effect: "flip", duration: 1000 },
                items: '.trigger.on',                   
                position: {
                    my: "top",
                    at: "top",
                    collision: "flip"
                }                   
            });
            $(this).trigger('mouseenter');
        });         



        /*$(clicked_id).on('click', '.trigger.on', function () {
            $(this).tooltip('close');
            $(this).removeClass("on");
        });*/
        //prevent mouseout and other related events from firing their handlers
        $(".trigger").on('mouseout', function (e) {
            e.stopImmediatePropagation();
        });
    }

Karankaras

Can you post a live example/fiddle please? – Tropous

I am unable to create fiddle but I updated my code. Please go through it – Karankaras

Difficult to debug without a jsfiddle. I can at least say that onclick="\buttonTempraturePressed(this.id)\" should be replaced by onclick="buttonTempraturePressed(this.id);". – Borglum

Also, replace " id="speed_" by " id="speed_ (the closing " is supplied later in your concatenation). – Borglum

In the title="<div ... part, some double quotes should probably be escaped. I can't tell which ones, since I couldn't quite figure out what is supposed to be included in that attribute. You may try to simplify that part and then make a jsfiddle with the minimal code. – Borglum

Here but ????? jsfiddle.net/Laouu8ox – Shem

What do you want to trigger the tooltip to close? mouseout event? – Differentiation

Answer 1

Here is an possible solution. Making use of the items and content options, you can adjust the content instead of trying to pass it via title attribute.

Working Example: https://jsfiddle.net/Twisty/cfd6z8db/

HTML

<div style="padding:20px; display: block;">
  <div id="temperature_bar">
  </div>
</div>
<div style="padding:20px; display: block;">
  <label>Speed</label>
  <button id="decSpeed" title="Decrease">-</button>
  <button id="incSpeed" title="Increase">+</button>
</div>

CSS

.item {
  border-style: solid;
  border-width: 1px 1px 1px 0;
  border-color: #ccc;
  padding: .25em .5em;
  cursor: pointer;
}

.item:nth-child(1) {
  border-left-width: 1px;
}

.row-thumbnail .caption {
  width: 100%;
  text-align: center;
}

jQuery

function showToolTips(obj) {
  if (obj.hasClass("on")) {
    // Hide ToolTip
    obj.removeClass("on");
    obj.tooltip("close");
  } else {
    // Show ToolTip
    obj.addClass("on");
    obj.tooltip("open");
  }
}

function addItem() {
  var divCount = $(".item").length + 1;
  if (divCount == 8) {
    return false;
  }
  var img = "https://dummyimage.com/50x50/000000/fff";
  var item = $("<div>", {
      id: "speed-" + divCount,
      class: "trigger item",
      "data-tip-content": img + "|" + divCount,
      "data-tip-id": divCount,
    })
    .css("float", "left");
  item.html(divCount);
  item.tooltip({
    disabled: true,
    hide: {
      effect: "flip",
      duration: 1000
    },
    position: {
      my: "center bottom+5",
      at: "center top",
      collision: "flip"
    },
    items: "[data-tip-content]",
    content: '<div class="row row-thumbnail" id="box-search"><div class="thumbnail text-center"><img width="50" height="50" src="' + item.data("tip-content").split("|")[0] + '" class="img-responsive"><div class="caption"><span class="tooltip-text-size">' + item.data("tip-content").split("|")[1] + '</span></div></div>'
  });
  $('#temperature_bar').append(item);

}

// Make Items
function init() {
  var c = 5;
  var divCount = 1;
  for (divCount; divCount <= c; divCount++) {
    var item = $("<div>", {
        id: "speed-" + divCount,
        class: "trigger item",
        "data-tip-content": "https://dummyimage.com/50x50/000000/fff" + "|" + divCount,
        "data-tip-id": divCount,
      })
      .css("float", "left");
    item.html(divCount);
    item.tooltip({
      disabled: true,
      hide: {
        effect: "flip",
        duration: 1000
      },
      position: {
        my: "center bottom+5",
        at: "center top",
        collision: "flip"
      },
      items: "[data-tip-content]",
      content: '<div class="row row-thumbnail" id="box-search"><div class="thumbnail text-center"><img width="50" height="50" src="' + item.data("tip-content").split("|")[0] + '" class="img-responsive"><div class="caption"><span class="tooltip-text-size">' + item.data("tip-content").split("|")[1] + '</span></div></div>'
    });
    $('#temperature_bar').append(item);
  }
}

$(function() {
  init();
  $(".trigger").on('mouseout', function(e) {
    if ($(this).hasClass("on")) {
      $(this).removeClass("on");
      $(this).tooltip("close");
    }
  });
  $("#temperature_bar").on("click", ".trigger", function() {
    console.log("Click Triggered. Executing 'showToolTips()'.");
    showToolTips($(this));
  });
  $("#decSpeed").click(function() {
    $("#temperature_bar .item").last().remove();
  });
  $("#incSpeed").click(addItem);
});

When using a position like { my: "top", at: "top", collision: "flip" }, this caused some type of weird loading issue. I used a different position and it seemed to clear the issue.

You post did not give a very strong example, so I created some example buttons. the disable option was also helpful, this ensured that they didn't display on mouseover events. It also allows us to control the open and close.

I packaged all the content items into a data attribute. I separated it with a pipe (|) so that it can all be one spot, but easily worked with later.

Click a button, and the tip appears. Click it again, and it hides. Same if you move the mouse away.

If you need more info, please update your post with a better example.

Differentiation

Answer 2

I would simply execute

$(".ui-tooltip-content").hide(); 

to:

function showTooltips(clicked_id){
    $(".ui-tooltip-content").hide(); // Clean up prior tips
    //show
    $(clicked_id).on('click', '.trigger', function () {
        $(this).addClass("on");
            $(this).tooltip({
...

hth

Lasalle