Question

Cold you plz look the following code,

<table title="Demo1">
  <tr>
  <td> <a href="" id="anch1">Test1</a> </td>
  <td> <a href="" id="anch2">Test2</a> </td>
  </tr>
</table>

Here the both Test1 and Test2 links displays default title “Demo1”
But i do not want the title for both links, for this functionality i am doing as follows

$("#anch1").removeAttr("title");
$("#anch2").removeAttr("title");

or

$("#anch1").attr("title", "");
$("#anch2").attr("title", "");

this code works in IE, but M FF is not working, the title is still displaying, and the table title should be there, we should not remove the table tile,
Could you plz answer..

Answer 1

You need to temporary clear the parent table title when hovering over the links, then restore the title when mouse leave the links. Most simple way is adding id to the table itself then:

var $table = $("#table1");
var originalTitle = $table.attr("title");
$("#anch1, #anch2").hover(function() {
    $table.attr("title", "");
}, function() {
    $table.attr("title", originalTitle);
});

This way you’re not dependent on browser behavior.

If you want this applied to all the links in the table, change the selector from "#anch1, #anch2" to $table.find("a").

Live test case.