Question

I want to be able to create a tooltip, but having referencing from two different places

    this.tooltip = function(){  

        xOffset = 10;
    yOffset = 20;       


    $("div.tooltip").hover(function(e){                                           
        this.t = $("a.tooltip").title;
        $("a.tooltip").title = "";                                    
        $("body").append("<p id='tooltip'>"+ this.t +"</p>");
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");        
    },
    function(){
        this.title = this.t;        
        $("#tooltip").remove();
    }); 
    $("div.tooltip").mousemove(function(e){
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};



// starting the script on page load
$(document).ready(function(){
    tooltip();
});

This is where I wanted to be able to work with. I have a text “Roll over for tooltip”, then a box saying “Web Standards Magazine” will pop up.

<div class="tooltip">Roll over for tooltip</div>
<span class="tooltip" title="Web Standards Magazine"></a>

I know there’s ways where you can just have it one area like

<span class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>

The reason why i’m not doing this is because I’m working on a small part of a larger file and I don’t want to mess anything up.

I’m getting undefined variable. Need help please, Thanks!

Answer 1

Assuming you’re doing some event like a hover(), you can concatenate the class of the element that received the event into the id-selector^[docs] in order to select the corresponding <div>.

$('img[class^="tooltip"]').hover(function() {
    $('#' + this.className).fadeIn();  // fadeIn, or do whatever with the div
},
  function() {
    $('#' + this.className).fadeOut();  // fadeOut, or do whatever with the div
});