jQuery toggle hover detection
<p>I have a button on my website that I'd like to use to toggle on and off a description box.  So when the button is clicked, I want it to show an image preview when you hover over certain elements on the page, but when the button is deselected, it should not show any image previews.</p>

<p>I created a jQuery function and pass it a boolean based on whether the image preview window should or should not show.  However, it seems like the hover function (     $(".node").hover(function(e)) is being called regardless of the boolean.  What am I doing wrong?</p>

<pre><code>$('.textIcon').click(function(){

        if(textCount %2 == 0){
                        // show preview images
            imagePreview("true");
            textCount++;
        }
        else{
            // hide preview images
            imagePreview("false");
            textCount++;
        }
    });
</code></pre>

<p>jQuery script:</p>

<pre><code>&lt;script&gt; 
// create pop up preview box for each step when text labels are off
this.imagePreview = function(on){

    console.log("in imagePreview, on: " + on);  

    /* CONFIG */    
        xOffset = 50;
        yOffset = 140;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */

    if(on=="true"){
        console.log("ON");
        $(".node").hover(function(e){
            console.log("node hover");
            // title of step
            this.t = $(this).data('title');
            this.title = "";
            // image url of step
            this.href = $(this).data('image');
            // show title + image for preview
            if(this.href != null){
                var c = (this.t != "") ? this.t + "&lt;br&gt;": "";
                $("body").append("&lt;p id='preview'&gt;" + c + "&lt;img src='"+ this.href +"' alt='Image preview' style='margin-top:5px' /&gt;" +"&lt;/p&gt;");  
            }
            // just show title for preview
            else{
                var c = (this.t != "") ? this.t : "";
                $("body").append("&lt;p id='preview'&gt;"+ c +"&lt;/p&gt;");    
            }

            $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
                .fadeIn("fast");                        

        },
        function(){
            this.title = this.t;    
            $("#preview").remove();
        }); 

        $(".node").mousemove(function(e){
            var dotPosition = $(this).position();
            $("#preview")
                .css("top",(dotPosition.top + xOffset) + "px")
                .css("left",(dotPosition.left + yOffset) + "px");
        }); 
        }
};
&lt;/script&gt;
</code></pre>
