Question

I would like to pass a variable to either cause this method by click or by hover.

Right now, it defaults to click.

    var defaults = {    
        xOffset: 10,        
        yOffset: 25,
        tooltipId: "easyTooltip",
        clickRemove: true,
        content: "",
        useElement: "",
        clickAppear: true
    }; 

    var options = $.extend(defaults, options);  
    var content;

$(this).click(function(e){
    $("#" + options.tooltipId).remove();                                                               
    content = (options.content != "") ? options.content : title;
    content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
    $(this).attr("title","");                                                   
    if (content != "" && content != undefined){         
        $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");      
        $("#" + options.tooltipId)
            .css("position","absolute")
            .css("top",(e.pageY - options.yOffset) + "px")
            .css("left",(e.pageX + options.xOffset) + "px")                     
            .css("display","none")
            .fadeIn("fast");
    return false;
    }
},

I want it to so that I could pass in the method call that clickAppear = false and in that case it would alternatively produce this:

$(this).hover(function(e){
  ...

Instead of copying and pasting the entire method twice in a conditional ( which didn’t seem to work anyway ), I was wondering if there was an elegant way to write this conditional while keeping the block DRY.

Any ideas?

Answer 1

Well you can just write:

$(this)[options.clickAppear ? "click" : "hover"](function(e) {
  // your code
});

That just checks the option and picks either the “click” or “hover” function, and calls it.