Есть ли способ отключить всплывающие подсказки тега <a>
в css?
Отключить всплывающие подсказки с помощью 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.
Ниже приведена ссылка на полный пример:
Ответ 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);
})