CODEWITHSUNDEEP
jquery
patrick
patrick

Reputation: 657

Custom Tooltip function from title attribute

I have a function for creating a tooltip from a title. I am trying to wrap this function in an if statement that checks the title length before returning the tooltip. But it doesn't seem to want to return anything. Is there a better way to do this then with an if statement?

$(document).ready(function() {

 if ($('#menu-headermenu a').attr('title').length == 0) {

 return null;

} else {

//Select all anchor tag with rel set to tooltip
$('#menu-headermenu a').mouseover(function(e) {

    //Grab the title attribute's value and assign it to a variable
    var tip = $(this).attr('title');    

    //Remove the title attribute's to avoid the native tooltip from the browser
    $(this).attr('title','');

    //Append the tooltip template and its value
    $(this).append('<div id="tooltip"><p>Take me to:<p><div class="tooltipcontent"' + tip + '</div></div>');     

    //Set the X and Y axis of the tooltip
    $('#tooltip').css('top', e.pageY + 10 );
    $('#tooltip').css('left', e.pageX + 20 );

    //Show the tooltip with faceIn effect
    $('#tooltip').fadeIn('500');
    $('#tooltip').fadeTo('10',0.8);

}).mousemove(function(e) {

    //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
    $('#tooltip').css('top', e.pageY + 10 );
    $('#tooltip').css('left', e.pageX + 20 );

}).mouseout(function() {

    //Put back the title attribute's value
    $(this).attr('title',$('div.tooltipcontent').html());

    //Remove the appended tooltip template
    $(this).children('div#tooltip').remove();

});

}
});

Upvotes: 0

Views: 1155

Answers (3)

Greg Pettit
Greg Pettit

Reputation: 10830

Personally, on document ready I would just bind my mouseover function straight-up without sanity checking. More flexible in the future if you ever add Ajax calls and suchlike:

$(document).ready(function() {
  $('#someWrapper').on('mouseover', '#menu-headermenu a', function(e) {
    // do stuff
  });
});

Where #someWrapper is any element projected to contain the anchor links in question. It doesn't have to be an element with an ID, it could even be 'body' if you need it to be, though usually an appropriate div can be identified in most documents.

All this does is say "Hey, #someWrapper... listen for mouseovers that happen on elements matching '#menu-headermenu a', will ya?"

The 'if' statement logic already requires you to inventory the DOM for matching selectors, so it's probably MORE computationally expensive than just binding the event to #someWrapper.

[update]

I did miss part of the question, but the original portion of my answer still stands... inside the function, THAT's where I would do a sanity check for the presence of a title or an empty string for the title.

var title = $(this).attr('title');
if (title !== undefined && title !== "") { /* etc */ }

Upvotes: 1

Pete Lada
Pete Lada

Reputation: 1318

Assuming you can't just use a[title]...

You need to wrap your if check in an each statement.

$('#menu-headermenu a').each(function(){
  if($(this).attr('title').length === 0){
    ...
  }
});

Upvotes: 1

rkw
rkw

Reputation: 7297

Have you considered using existing solutions? (e.g. http://jquery.bassistance.de/tooltip/demo/)

As for your question, you can just add a filter to your selector: $('#menu-headermenu a[title]')

This should make it so that only elements with a title attribute will have the events attached.

Upvotes: 2

Related Questions