25 December 2014

Enable Jquery Tooltip for Click Event Only

Let us say we have a div element as follows

<div title = "jQuery Tooltip on Click" id = "tooltip" > jQuery Tooltip on Click </div>

you can use below mentioned script to enable jquery tooltip only on click

jQuery("document").ready(function(){ 

    $('#tooltip').tooltip({disabled: true}).on("click", function() { 
     
     if($("#tooltip").hasClass("opentooltip")){ 
      
      $("#tooltip").tooltip("close"); 
      
      $("#tooltip").removeClass("opentooltip"); 
     
     } else {
      
      $("#tooltip").addClass("opentooltip"); 
      
      $(this).tooltip("enable").tooltip("open").off("mouseover mouseout mouseleave");
      
     }
     
    });
    // Disable Default MouseOver Behavior for Div
    $("#tooltip").hover(function(e){ e.preventDefault(); });
    
   });

No comments:

Post a Comment