Search code examples
jqueryjquery-tabs

Avoid showing tab anchor tag title attribute as tool tip

jQuery 1.7.1 - I'm using jQuery tabs widget in my JSP and have the following code to represent tabs,

<div id="tabs">
    <ul>
        <li><a href="t1" title="content">Gallery</a></li>
        <li><a href="t2" title="content">Polls</a></li>
        <li><a href="t3" title="content">Events</a></li>
    </ul>
        <div id="content"></div>
</div>

These 3 tabs appear OK in the browser, but when I mouse over the tabs 'content' is getting displayed as a tool tip in Chrome, Firefox and IE. Any way to avoid seeing 'content' as tool tip and provide the actual tool tip like 'Click to see Gallery' etc.

EDIT: I use title attribute to specify the container for loading ajax content, http://jqueryui.com/demos/tabs/#Ajax_mode

Solution

  • If you absolutely have to have the title attribute then you could try removing it temporarily on mouseover.

    var temptitle;
$('a').hover( 
   function() {
      // remove the title
      temptitle = $(this).attr('title')
      $(this).attr('title','')
   },
   function() {
      // replace the title
      $(this).attr('title',temptitle)
   }
);