Отключить всплывающие подсказки с помощью css

Есть ли способ отключить всплывающие подсказки тега <a> в css?

Ответ 1

Просто вставьте этот код в нижней части тэга <body> в <script>.

В этом коде используется jQuery:

$('.titleHidden').removeAttr('title');

Затем вам нужно добавить класс CSS titleHidden к каждому тегу a, если вы хотите скрыть его всплывающую подсказку.

Ответ 2

Я не знаю, по какой причине вы хотите отключить всплывающие подсказки, но я сам столкнулся с той же проблемой.

Я пытался создать всплывающую подсказку в CSS, но всплывающая подсказка браузера всегда появлялась и мешала. Поэтому, как и вам, мне нужно было отключить всплывающую подсказку по умолчанию.

Я использовал немного jQuery для удаления тега "Заголовок", но только при наведении курсора мыши. Как только мышь отключена, тег "Заголовок" восстанавливается.

Ниже приведен DIV с некоторым содержанием "Заголовок":

<div class="tooltip-class" title="This is some information for our tooltip.">
  This is a test
</div>

Теперь вам нужно будет запустить следующий jQuery, чтобы скрыть тег Title при наведении курсора мыши:

$(document).ready(function(){
  $(".tooltip-class").hover(function(){
    $(this).attr("tooltip-data", $(this).attr("title"));
    $(this).removeAttr("title");
  }, function(){
    $(this).attr("title", $(this).attr("tooltip-data"));
    $(this).removeAttr("tooltip-data");
  });
});

Обратите внимание, что этот код jQuery был протестирован в среде с jQuery версии 1.6.4.

Ниже приведена ссылка на полный пример:

http://jsfiddle.net/eliasb/emG6E/54/

Ответ 3

Я знаю, что это старый вопрос, но тем временем это стало возможным благодаря CSS:

pointer-events: none;

Обратите внимание, что это также отключает возможность щелчка! Это то, что мне было нужно, но, возможно, это не так для OP.

cfr https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

Ответ 4

<link rel="Stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>


$(function(){

    $('*').tooltip({ track: true });

    $('*[title]').tooltip('disable');

});

Ответ 5

Вы можете сделать так, чтобы атрибут title удалялся исключительно при наведении, а затем снова добавлялся. Благодаря этому ваш SEO остается идентичным, но при наведении курсора текст подсказки отсутствует.

$('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', '');
});

Ответ 6

Это не решение с использованием CSS, но иногда может помочь, и я использовал это в качестве обходного пути: добавьте атрибут "title" как пустой в теге или в любом другом теге, который вы хотите, чтобы заголовки не появлялись. Имейте в виду, что это ухудшит читабельность страницы для людей, которые слепы или имеют некоторые дефекты в зрительных органах.

Пример:

<div title>This will have no title popping up, even if parent tag is setting a title</div>

Ответ 7

Я боюсь, что это просто невозможно. Однако вы можете использовать Javascript для выделения заголовка ссылки, который может позволить вам делать то, что вы хотите:

document.getElementById('aid').title = "";

должен сделать трюк.

Ответ 8

$(.classname).attr("title","");

с помощью атрибута будет искать заголовок и заменяется на "" (пусто). Попробуйте, и подсказка не будет отображаться при наведении курсора.

Ответ 9

$('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);
})