It is not a solution using CSS but sometimes may help and i used this as a workaround: add "title" attribute as being empty in the tag or whichever tag you wanna see no titles popping up. Keep in mind that it will ruin the readability of the page for people who are blind or have some defects in their visual senses.
Example:
<div title>This will have no title popping up, even if parent tag is setting a title</div>
Just paste this code at the bottom of your <body>
tag in a <script>
.
This code uses jQuery:
$('.titleHidden').removeAttr('title');
Then you need to add the CSS class titleHidden
to each a
tag when you want to hide its tooltip.
$('a[title]').each(function (index, el) {
var $tooltip = $('<div class="overlay-' + index + '" />')
.css({
position: "absolute"
, background: "url('../Images/space.gif')"
, width: $(el).width()
, height: $(el).height()
, top: 0
, left: 0
, zIndex: 300
, border: "1px solid red"
})
.on('click', function (event) {
$(el).click();
});
$(this).after($tooltip);
})
You can make it so that the title
attribute is removed exclusively on hover, and then re-added. This makes it so that your SEO remains identical, but there is no tooltip text when hovering.
$('a[title]').on('mouseenter', function () {
var $this = $(this);
$this.attr('title-cache', $this.attr('title'));
$this.attr('title', '');
});
$('a[title]').on('mouseleave', function () {
var $this = $(this);
$this.attr('title', $this.attr('title-cache'));
$this.attr('title-cache', '');
});