Desativando navegador tooltips em links e s

Question

Eu quero suprimir a exibição dica de ferramenta padrão do navegador da web quando um usuário paira sobre certos links e elementos. Eu sei que é possível, mas eu não sei como. Alguém pode ajudar?

A razão para isso é a de suprimir a dica para a data vezes microformatted. A BBC retirou o suporte para hCalendar porque o appearane da data legível por máquina era um problema de acessibilidade para as pessoas com deficiências cognitivas além como alguns usuários de leitores de tela. http://www.bbc.co.uk/blogs/bbcinternet /2008/07/why_the_bbc_removed_microforma.html

EDIT:

Eu chicoteado até um plugin jQuery ao longo das mesmas linhas como a sugestão de Aron ...

// uFsuppress plugin v1.0 - toggle microformatted dates
(function($){
$.ufsuppress = function() {
    $(".dtstart,.dtend,.bday").hover(function(){
        $(this).attr("ufdata",$(this).attr("title"));
        $(this).removeAttr("title");
    },function(){
        $(this).attr("title",$(this).attr("ufdata"));
        $(this).removeAttr("ufdata");
    });
}
})(jQuery);

// Usage
$.ufsuppress();

Answer 1

Tanto quanto eu sei que não é possível realmente suprimir mostrando a tag título.

Existem algumas soluções no entanto.

Supondo que você quer dizer que você quer preservar a propriedade título em seus links e elementos, você poderia usar o Javascript para remover a propriedade de título na onmouseover() e configurá-lo novamente no 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 2

Adicione este elemento para o seu html

    onmouseover="title='';"

Por exemplo eu tenho uma caixa de seleção asp.net eu armazenar uma variável oculta, mas não quer que o usuário ver em quanto a dica.

Answer 3

corri em toda esta discussão quando se usa o plugin jQuery timeago . Na verdade, a solução é muito simples usando o pointer-events propriedade CSS. Postando isso para o benefício das pessoas que vêm aqui através de um motor de busca:)

.suppress {
    pointer-events:none;
}

Note que você não deve usar isso para coisas como links que devem clicar até algo. Neste caso, utilize a solução JS aceitou.

Answer 4

Algo como isso no protótipo faria em branco todos os atributos de título datetime microformatos com um classe de 'dtstart':

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

Note que eu usei um espaço em branco, a documentação Mozilla para element.title estados

De acordo com a bug 264001 , definição título aos disparadores de cadeia vazios o padrão herdar comportamento. Cancelar herança, o título deve ser definido como um seqüência de espaços em branco não-vazia.

Answer 5

Isto não ajuda com o seu problema, mas pode ser interessante, no entanto: Não há outro atributo universal para além de title que pode ser usado para armazenar dados - lang

Apenas converter os dados que deseja armazenar a uma cadeia contínua e prefixo com 'x-' para declarar o uso privado, de acordo com a RFC 1766.

---

Nos comentários, sanchothefat esclareceu que ele quer resolver a usabilidade-problemas com o abbr-design-padrão em microformatos. Mas há outros padrões que são tão semanticamente significativa (ou, na minha opinião, mais ainda) do que esse padrão. O que eu faria:

<p>
 The party is at
  <dfn class="micro-date">10 o'clock on the 10th
   <var>20051010T10:10:10-010</var></dfn>.
</p>

juntos econômicos com esses estilos

dfn.micro-date {
    font-weight: inherit;
    font-style: inherit;
}
dfn.micro-date var {
    display: none;
}

Na minha opinião, a forma semanticamente mais correto seria a utilização de uma lista de definições dl - o que não é permitido dentro de parágrafos. Isso pode ser contornado com o seguinte padrão:

<p>
 The party is at <q cite="#micro-dates">10 o'clock on the 10th</q>.
</p>

<dl id="micro-dates">
 <dt>10 o'clock on the 10th</dt>
 <dd>20051010T10:10:10-010</dd>
</dl>

que requer um estilo mais sofisticado:

q[cite='#micro-dates']:before {
    content: '';
}
q[cite='#micro-dates']:after {
    content: '';
}
dl#micro-dates {
    display: none;
}

Answer 6

Isto é o que eu fiz.

$('.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 7

Você pode ligar o 'mouseenter' evento e falsa de retorno que vai parar as dicas de ferramentas nativas que está sendo exibido.

$(selector).on( 'mouseenter', function(){
    return false;
});

Answer 8

É possível suprimir esse comportamento com 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