In my project I'm using jquery tipsy tooltp to validate the fields of a form. I would like to hide all open tooltips in one shot without having to specify the id of each element, but unfortunately I can not. I tried this way, but the buttons hide2 and hide3 not work properly.

<p><input type="text" name="name" id="name" rel="ttp" /></p>
<p><input type="text" name="sname" id="sname" rel="ttp" /></p>
<p><input type="text" name="email" id="email" rel="ttp" /></p>

<input type="button" value="show" id="show_ttp">
<input type="button" value="hide" id="hide_ttp">
<input type="button" value="hide2" id="hide2_ttp">
<input type="button" value="hide3" id="hide3_ttp">

JS

$('[rel=ttp]').tipsy({trigger: 'manual', gravity: 'w'});

$("#show_ttp").click(function(){
   $('#name').attr('title', 'name').tipsy('show');
   $('#sname').attr('title', 'surname').tipsy('show');
   $('#email').attr('title', 'email').tipsy('show');
});

$("#hide_ttp").click(function(){
   $('#name').tipsy('hide');
   $('#sname').tipsy('hide');
   $('#email').tipsy('hide');
});

$("#hide2_ttp").click(function(){
   $('*').tipsy('hide');
});

$("#hide3_ttp").click(function(){
  $('[rel=ttp]').tipsy('hide');
});

/

How could I do? thank you

In my project I'm using jquery tipsy tooltp to validate the fields of a form. I would like to hide all open tooltips in one shot without having to specify the id of each element, but unfortunately I can not. I tried this way, but the buttons hide2 and hide3 not work properly.

<p><input type="text" name="name" id="name" rel="ttp" /></p>
<p><input type="text" name="sname" id="sname" rel="ttp" /></p>
<p><input type="text" name="email" id="email" rel="ttp" /></p>

<input type="button" value="show" id="show_ttp">
<input type="button" value="hide" id="hide_ttp">
<input type="button" value="hide2" id="hide2_ttp">
<input type="button" value="hide3" id="hide3_ttp">

JS

$('[rel=ttp]').tipsy({trigger: 'manual', gravity: 'w'});

$("#show_ttp").click(function(){
   $('#name').attr('title', 'name').tipsy('show');
   $('#sname').attr('title', 'surname').tipsy('show');
   $('#email').attr('title', 'email').tipsy('show');
});

$("#hide_ttp").click(function(){
   $('#name').tipsy('hide');
   $('#sname').tipsy('hide');
   $('#email').tipsy('hide');
});

$("#hide2_ttp").click(function(){
   $('*').tipsy('hide');
});

$("#hide3_ttp").click(function(){
  $('[rel=ttp]').tipsy('hide');
});

http://jsfiddle/tm9V2/

How could I do? thank you

• javascript
• jquery
• html
• css
• animation

Share Improve this question Follow edited Oct 4, 2015 at 6:56 Barlas Apaydin 7,3151111 gold badges5858 silver badges8888 bronze badges asked Jul 9, 2014 at 8:47 Paolo RossiPaolo Rossi 2,5101212 gold badges4747 silver badges7070 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

To hide all the tipsy tooltip just use .tipsy class as a selector and hide it using jquery hide()

CODE :

$("#hide2_ttp").click(function(){
    $('.tipsy').hide();
});

Fiddle Demo

My be this is what you are looking for

  $("#hide3_ttp").click(function(){
        $('[rel=ttp]').each(function(index, element){$(element).tipsy('hide');});
    });

Just wrap up all the elements in a div/form/span and change your following code :

$("#hide2_ttp").click(function(){
    $('*').tipsy('hide');
});

to

$("#hide2_ttp").click(function(){

 $('#elements input').each(function(){
        $(this).tipsy('hide');
    });
});

where 'elements' is the id for the wrapper of your inputs.

In this way you can have multiple group of inputs and close their tipsy separately.

FIDDLE : http://jsfiddle/tm9V2/8/

I don't know to use this tooltip plugin but you can hide these object with using force.

Since tipsy plugin removes its object with its hide method, you can use jQuery .remove() function aswell and don't forgot tipsy appends objects with javascript, so use $(document).on to manipulate them. check this:

jsFiddle Demo

$(document).on('click','#hide2_ttp',function(){
    $('.tipsy').eq(1).remove();
});

$(document).on('click','#hide3_ttp',function(){
    $('.tipsy').eq(0).remove();
});

Edit: for hiding all tooltips which are open, use this function:

jsFiddle Demo

$(document).on('click','#hideallopen',function(){
    $('.tipsy').remove();
});