How to use Hover and click using Jquery

Question

Hi all i am using the hover and click function for a tool tip from here

Now as per my requirement i would like to combine both hover and click event in one method. When hover i don't want to show close button but when user click i would like to show close button. How can i do this in one event can any help me or if any examples or samples please share

I tried this for Tooltip on Click

<script type="text/javascript">
  $(document).ready(function() {
     $('#foobar2').click(function() {
      var url = $(this).attr('href');       
      $(this).formBubble({
        url: url,
        dataType: 'html',
        cache: false
      });

      return false;
    });
  });
</script>

I tired this but not working can you edit please

 <script type="text/javascript">
  $(document).ready(function() {
  $('#foobar2').bind('mouseover click',function(e) {
    if(e.Type=='click')
    {
    var url = $(this).attr('href');

      $(this).formBubble({
        url: url,
        dataType: 'html',
        cache: false
      });

      return false;
    }


      if(e.Type=='mouseover')
      {
      var url = $(this).attr('href');

      $(this).formBubble({
      closebutton:false;
        url: url,
        dataType: 'html',
        cache: false
      });
      $.fn.formBubble.text('hover hover hover hover');
    }, function() { //mouse out
      var thisBubble = $.fn.formBubble.bubbleObject;

      $.fn.formBubble.close(thisBubble);
    });
      }   

    });});
</script>

hi i tried this but didn't work

 if(e.type=='mouseout')
{
var url = $(this).attr('href'); 
$(this).formBubble.hide()
}

Billy Moon · Accepted Answer · 2011-09-12 11:33:44Z

3

instead of binding with: .click(function(){ ... })

bind with: .bind('mouseover click',function(e){ ... })

then inside the function use: e.type which will be a string determining what event type was triggered

<script type="text/javascript">
  $(document).ready(function() {
     $('#foobar2').bind('mouseover click',function(e) {

      if(e.type == 'click'){
        // do some click event stuff
        var close = true 
      } else {
        // do some hover event stuff
        var close = false 
      }

      var url = $(this).attr('href');       
      $(this).formBubble({
        url: url,
        dataType: 'html',
        cache: false,
        closeButton: close
      });

      return false;
    });
  });
</script>

edited Sep 12, 2011 at 11:33

answered Sep 12, 2011 at 11:15

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vivekh Over a year ago

How can i disable close on hover

Billy Moon Over a year ago

i think you add closeButton: false to the instantiating options object to disable the close button. My answer is updated to reflect this.

Vivekh Over a year ago

Hi Billy i have question how can i disable the tool tip when i take my control out side the image or control

Billy Moon Over a year ago

bind a mouseout event in a similar way to the mouseover event, identify the button (by using a javascript console of some kind - I recommend firebug for firefox) and then with jQuery select the object you want to remove and use .hide() function - something like this: $('#tool-tip-id').hide().

Billy Moon Over a year ago

you need to bind the mouseout event, so either add it to your existing bind like this .bind('mouseover mouseout click',function(e){ ... }) and then do a test on e.type or bind a new function like this .bind('mouseout',function(){ ... }) where no test on type would be necessary

|

Collectives™ on Stack Overflow

How to use Hover and click using Jquery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related