Jquery UI Tooltip not able to hide - html

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

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.

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