Unable to getting current element hover is firing on

Question

first here is the JSFiddle I've been working on

http://jsfiddle.net/rastlin80/P53Le/

I've created a new plugin called sopopup

what is does is match an element as a pop-up that will appear around some text when the text is hovered.

it works correctly when the selector for the element that will be hovered is a single element

 $('#message').sopopup({ target: $('#ho')});

the pop up appears right above the text, but when the selector has multiple items it always hovers over the first item.

 $('#message2').sopopup({ target: $('.meds')});

my problem is in the code for the hover event.

settings.target.hover( //where target are the elements selected such as $('.meds')
        function() { 
            //here is my problem the var this is not the target being hovered
            //the var this is refering to the settings it seems

            var pos;
            var hgt;

            if(settings.location === 'top'){
                pos = settings.target.position();
                //i wanted to do this.position() but that show an error
                hgt = settings.pop.height();

                settings.pop.css({
                    position: "absolute",
                    top: (pos.top - hgt) + "px",
                    left: pos.left + "px"
                });
            }
            else if( settings.location === 'bottom'){
                pos = settings.target.postion();
                hgt = settings.target.height();

                settings.pop.css({
                    position: "absolute",
                    top: (pos.top + hgt) + "px",
                    left: pos.left + "px"
                });

            }

            settings.pop.show();
        }.bind(settings)

I am unable to use the variable this to refer to the item that is currently being hovered over. instead the variable this within the hoverIn function seems to refer to the settings object.

any help appreciated.

Answer 1

This fork of your Fiddle uses a combination of $.each and setting a variable named self to reference the appropriate this (wrapped with jQuery) to achieve what I believe it is you're asking for:

$.each(settings.target, function(){
    var self = $(this);
    self.hover(function() {           
      var pos;
      var hgt;

      if(settings.location === 'top'){
          pos = self.position();
          [...]