Forum user: Candy_ffm

Here is another solution, which fits best for me and maybe it helps some other:

I use the tooltip plugin for showing up administration options on specific elements. So everytime the tooltip trigger element is hovered the tooltip shows up. But as the administrator view of the site is same as the user's, it might be annoying to have these bubbles all the time.

So added a link with a toggle function to switch tooltips on and off.

Toggle function

$('#admin_edit_mode_change').click(function() {
  var status = $("#edit_icon_1").css('display');
  if(status == 'block'){
    $(".bubble").each(function(index) {  
      $("#edit_icon_"+index).hide();
    })
    $(".bubble").siblings("div").addClass('hide');
    $('#admin_edit_mode_change').html('Turn edit mode OFF');
    $(".bubble").siblings("div").hide();
  }else{
    $(".bubble").each(function(index) {  
      $("#edit_icon_"+index).show();
    })
    $(".bubble").siblings("div").hide();
    $(".bubble").siblings("div").removeClass('hide');
    $('#admin_edit_mode_change').html('Turn edit mode ON');
  }
});

Because I couldn't properly destroy the tooltips, I hide them. This is why I add the class "hide". The CSS to that class is:

.hide {
  height: 0px !important;
  width: 0px !important;
  padding: 0 !important;
  display: none;
  overflow: hidden;
}

But it is not enough to make them invisible and shrink them to zero.
If you hover the trigger elements while in "non-edit" mode tooltip show them up, even if you are not able see them. But they remain in cache showed up and when you reanable "edit-mode" they appear instantly. That's why I added

$(".bubble").siblings("div").hide();

.bubble is the trigger class for all tooltips to show up
.siblings("div") is used to make the next div-element be recognised as tooltip-div

Adding this into the toggle function made the tooltip work more properly than adding the hide()-function in "onBeforeShow".

The first part of the code is jsut the toggle check:

var status = $("#edit_icon_1").css('display');
  if(status == 'block'){
  ...

The edit icon id's are given to small pencil that are shown above the hover trigger element to indicate that there is something to edit.

Maybe this will help some of you. I know that it is not the 'cleanest' method but it works for me very well.

And please excuse my english writing if it is bad. English is not my native language.

Thanks.
That quite better than just using "mouseout" trigger for hiding last used tooltip. Sometimes the trigger isn't activated when switching from one tooltip trigger to another.

I added the following code to my tooltip function

onBeforeShow: function(){
  $(".bubble").siblings("div").hide();
}

".bubble" is the class all of my hover elements have.
Next to these hover elements, there is the tooltip div, that is why I'm using ".siblings("div")".