Скрытие заголовков тегов при наведении

Question

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

Кто-нибудь знает или занимался проблемой отображения тегов заголовков при наведении курсора. У меня есть ряд ссылок и изображений, которым будут назначены теги заголовков, однако некоторые из них будут отображать информацию, которая была бы лучше, если бы не всплывала при наведении курсора.

Есть ли глобальная функция, которую я мог бы использовать, чтобы применить ее ко всем типам тегов заголовков? Пример будет следующим:

<a href="service.php" title="services for cars" />

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

Еще раз спасибо.

Answer 1

Это прекрасно работает, чтобы отключить отдельный заголовок:

<a href="service.php" title="services for cars" onmouseover="this.title='';" />

Если впоследствии вам понадобится заголовок, вы можете восстановить его:

<a href="service.php" title="services for cars" onmouseover="this.setAttribute('org_title', this.title'); this.title='';" onmouseout="this.title = this.getAttribute('org_title');" />

Этот способ не является универсальным.... чтобы применить его ко всем якорям, используйте такой код JavaScript:

window.onload = function() {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        link.onmouseover = function() {
            this.setAttribute("org_title", this.title);
            this.title = "";
        };
        link.onmouseout = function() {
            this.title = this.getAttribute("org_title");
        };
    }
};

Живой тестовый пример .

Редактировать: применить то же самое для большего количества тегов (например,<img>) сначала переместите ядро ​​кода в функцию:

function DisableToolTip(elements) {
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        element.onmouseover = function() {
            this.setAttribute("org_title", this.title);
            this.title = "";
        };
        element.onmouseout = function() {
            this.title = this.getAttribute("org_title");
        };
    }
}

Затем измените код на:

window.onload = function() {
    var links = document.getElementsByTagName("a");
    DisableToolTip(links);
    var images = document.getElementsByTagName("img");
    DisableToolTip(images);
};

Answer 2

Если ваш аргумент в пользу использования тега 'title' соответствует Aria, вместо этого используйте aria-label.

<a href="service.php" aria-label="services for cars" />

Answer 3

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

    <a href="service.php" title="" title="services for cars" />

Answer 4

Простая альтернатива - использовать CSS на контейнере изображения (div или a):

pointer-events: none;
cursor: default;

Answer 5

Хотя это уже было дано в ответе в стандартном JS.

Вот решение jQuery.

$('a').hover( 
  function() {
        $(this).attr("org_title", $(this).attr('title'));
        $(this).attr('title', '');
  }, function() {
        $(this).attr('title', $(this).attr("org_title"));
  }
);

Answer 6

Вы не можете отключить их, потому что это общая часть спецификации браузеров / html.Но я знаю, что вы можете стилизовать их, используя css и javascript, поэтому отображение: ни один из них не должен использоваться где-либо должным образом.

посмотрите здесь