Question

Basically i’m trying to grap the text from the title attribute in a link and show it in a paragaph in another div when a user hovers of the item, and then hide it when the user moves away. so far what i’ve got is

(function($) {
    $.fn.showText = function() {
        $(this).hover(
            function() {
                $(this)
                    .data('title', $(this).attr('title'))
                    .removeAttr('title')
        .appendTo(".itemDecription p");
            }, 
            function() {
                $(this).attr('title', $("this").data('title'));
            }
        );
    }
})(jQuery);

//call the plugin
$(function(){
$('.wrapper ul li a').showText();

}); 

I got the code from somewhere else on stackoverflow, but i just can’t seem to get it to work, and help would be much appriciated.

Answer 1

I am not sure about the data stuff and why you want to remove the title attribute from the element (I see no reason to do it) but you probably want:

(function($) {
    $.fn.showText = function() {
        this.each(function() {
            $(this).hover(
               function() {        
                   $(".itemDecription p").text($(this).attr('title'));
                   $(this).data('title', $(this).attr('title')).removeAttr('title');
               }, 
               function() {
                   $(".itemDecription p").empty();
                   $(this).attr('title', $(this).data('title'));
               }
            );
        });
        return this;
    }
})(jQuery);

It is important that you use each() because the selector might select multiple a elements (maybe this is reason why it does not work).

So also How to develop a jQuery plugin