JQuery Title Attribute Tooltip - Remove Browser Tooltip

2.2k Views Asked by At

I have the following JQuery code for tooltip that uses the title attribute string. My problem is that the browser tooltip also shows up and I can't figure out how to work around this.

function Tooltip() {
   Form.append('<div class="Tooltip"></div>');
   $('input, textarea, select, p, label').mousemove(function(e) {
      var HoverText = $(this).attr('title');
      var Tooltip = $('.Tooltip');
      if(HoverText){
         Tooltip.html(HoverText).fadeIn(100);
         Tooltip.css('left', e.clientX + 15).css('top', e.clientY + 15);
      }
   }).mouseout(function() {
       var Tooltip = $('.Tooltip');
       Tooltip.fadeOut(100);
   });
}

Thank you!

UPDATE:

Now the title attribute is removed, the value is stored in $.data. Unfortunately the mousemove function is not working this way...

function Tooltip() {
   Form.append('<div class="Tooltip"></div>');
   $('input, textarea, select, p, label').mousemove(function(e) {
      $(this).data('title', $(this).attr('title')).removeAttr('title');
      var HoverText = $(this).data('title');
      var Tooltip = $('.Tooltip');
      if(HoverText){
         Tooltip.html(HoverText).fadeIn(100);
         Tooltip.css('left', e.clientX + 15).css('top', e.clientY + 15);
      }
   }).mouseout(function() {
       var Tooltip = $('.Tooltip');
       Tooltip.fadeOut(100);
       $(this).attr('title', $(this).data('title'));
   });
}
1

There are 1 best solutions below

2
On
var title = $(this).data('title');
var titleAttr = $(this).attr('title');
if( titleAttr && !title){
    title = $(this).data('title', $(this).attr('title')).removeAttr('title');
}