Disabling browser tooltips on links and s

Question

I want to suppress the web browser\'s default tooltip display when a user hovers over certain links and elements. I know it\'s possible but I don\'t know how. Can anyone he

Answer 1

It's possible to suppress this behaviour with jQuery

var tempTitle;
$('[title]').hover(
  function(e) {
    debugger;
    e.preventDefault();
    tempTitle = $(this).attr('title');

    $(this).attr('title', '');
    // add attribute 'tipTitle' & populate on hover
    $(this).hover(
      function() {
        $(this).attr('tipTitle', tempTitle);
      }
    );
  },
  // restore title on mouseout
  function() {
    $(this).attr('title', tempTitle);
  }
);

.progress3 {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
}
.progress3:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(data-tooltip);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
}
.progress3:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div title='abc' data-tooltip="This is some information for our tooltip." class="progress3">
  title='abc' will not be displayed
</div>

fiddle

Answer 2

Something like this in prototype would blank all title attributes of datetime microformats with a class of 'dtstart':

$$('abbr.dtstart').each(function(abbr){abbr.title=' '})

Note I used a blank space, the Mozilla documentation for element.title states

According to bug 264001 , setting title to the empty string triggers the default inheriting behavior. To cancel inheritance, title must be set to a non-empty whitespace string.

Answer 3

As far as I know it is not possible to actually suppress showing the title tag.

There are some workarounds however.

Assuming you mean you want to preserve the title property on your links and elements, you could use Javascript to remove the title property at onmouseover() and set it again at onmouseout().

// Suppress tooltip display for links that have the classname 'suppress'
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    if (links[i].className == 'suppress') {
        links[i]._title = links[i].title;
        links[i].onmouseover = function() { 
            this.title = '';
        }
        links[i].onmouseout = function() { 
            this.title = this._title;
        }
    }
}

Answer 4

Ran across this thread when using the jQuery plugin timeago. Actually the solution is very simple using the CSS property pointer-events. Posting this for the benefit of people coming here through a search engine :)

.suppress {
    pointer-events:none;
}

Note that you shouldn't use this for things like links that should click through to something. In this case use the accepted JS solution.

Answer 5

This is what i did.

$('.fancybox').hover(
    function(){
        $(this).attr('alt',$(this).attr('title'));
        $(this).attr('title','');
    },
    function(){
        $(this).attr('title',$(this).attr('alt'));
        $(this).removeAttr('alt');
    }
).click(function(){
    $(this).attr('title',$(this).attr('alt'));
    $(this).removeAttr('alt');
});

Answer 6

Add this element to your html

    onmouseover="title='';"

For example i have a asp.net checkbox I store a hidden variable but do not want the user to see on as the tooltip.