Скрыть встроенную подсказку с помощью jQuery

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

UPDATE:

После прочтения нескольких других сообщений я не думаю, что могу скрыть атрибут title для собственного действия всплывающей подсказки, но я пытаюсь думать за пределами поля здесь. Могу ли я использовать другой атрибут вместо атрибута title внутри тега привязки и по-прежнему сохранять действительную страницу???

Удаление значения атрибута title не является опцией, если кто-то не может понять, как добавить его для события onclick?

КОД РАБОТЫ НИЖЕ

$('[title]').each( function() {
    var $this = $(this);
    $this.data('title',$this.attr('title'));
    $this.removeAttr('title');
});

$('a').click( function() {
    var $this = $(this);
    var title = $this.data('title');
    ... do your other stuff...
});

Ответы

Ответ 1

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

$('[title]').each( function() {
    var $this = $(this);
    $this.data('title',$this.attr('title'));
    $this.removeAttr('title');
});

$('a').click( function() {
    var $this = $(this);
    var title = $this.data('title');
    ... do your other stuff...
});

Оригинальный ответ:

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

$('[title]').hover(
   function(e) {
       e.preventDefault();
   },
   function() { }
);

За исключением тестирования, он не работает.

Ответ 2

Вы можете удалить его:

$("a").removeAttr("title");

Это удалит его только для пользователей js, поэтому он доступен и доступен для поисковых систем.

Ответ 3

Я использовал вариацию кода bEj ni c bEj, потому что мне нужно было сохранить заголовок содержимого при наведении, но все же необходимо было подавить поведение по умолчанию.

// Suppress default tooltip behavior on hover
var tempTitle = "";
$('abbr[title],dfn[title],span.info-tip[title],').hover(
function(e){
    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);
   }
);

Это позволяет мне сделать это в моей таблице стилей: /* abbr & tooltip styles: first, the immediate descendants of the content area are set to highlight abbreviations on hover, but avoiding lists; as we don't want *all* abbreviations highlighted when you hover on a root list */

abbr,
abbr[tipTitle],
dfn,
dfn[tipTitle],
span.info-tip,
span.info-tip[tipTitle] {
border-bottom:none; /*remove border 1st, then let following rules add it back in*/
}

p:hover abbr[tipTitle],
li:hover abbr[tipTitle],
dl>*:hover abbr[tipTitle],
label:hover abbr[tipTitle],
p:hover dfn[tipTitle],
li:hover dfn[tipTitle],
dl>*:hover dfn[tipTitle],
label:hover dfn[tipTitle],
p:hover span.info-tip[tipTitle],
li:hover span.info-tip[tipTitle],
dl>*:hover span.info-tip[tipTitle],
label:hover span.info-tip[tipTitle]
{
position: relative;
text-decoration: none;
border-bottom: 1px dotted #333;
cursor: help;
}

p:hover abbr[tipTitle]:before,
li:hover abbr[tipTitle]:before,
dl>*:hover abbr[tipTitle]:before,
label:hover abbr[tipTitle]:before,
p:hover dfn[tipTitle]:before,
li:hover dfn[tipTitle]:before,
dl>*:hover dfn[tipTitle]:before,
label:hover dfn[tipTitle]:before,
p:hover span.info-tip[tipTitle]:before,
li:hover span.info-tip[tipTitle]:before,
dl>*:hover span.info-tip[tipTitle]:before,
label:hover span.info-tip[tipTitle]:before {
content: "";
position: absolute;
border-top: 20px solid #803808;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
visibility: hidden;
top: -18px;
left: -26px;
}

p:hover abbr[tipTitle]:after,
li:hover abbr[tipTitle]:after,
dl>*:hover abbr[tipTitle]:after,
label:hover abbr[tipTitle]:after,
p:hover dfn[tipTitle]:after,
li:hover dfn[tipTitle]:after,
dl>*:hover dfn[tipTitle]:after,
label:hover dfn[tipTitle]:after,
p:hover span.info-tip[tipTitle]:after,
li:hover span.info-tip[tipTitle]:after,
dl>*:hover span.info-tip[tipTitle]:after,
label:hover span.info-tip[tipTitle]:after {
content: attr(tipTitle);
position: absolute;
color: white;
top: -35px;
left: -26px;
background: #803808;
padding: 5px 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
white-space: nowrap;
visibility: hidden;
}

p:hover abbr[tipTitle]:hover:before,
li:hover abbr[tipTitle]:hover:before,
dl>*:hover abbr[tipTitle]:hover:before,
label:hover abbr[tipTitle]:hover:before,
p:hover dfn[tipTitle]:hover:before,
li:hover dfn[tipTitle]:hover:before,
dl>*:hover dfn[tipTitle]:hover:before,
label:hover dfn[tipTitle]:hover:before,
p:hover span.info-tip[tipTitle]:hover:before,
li:hover span.info-tip[tipTitle]:hover:before,
dl>*:hover span.info-tip[tipTitle]:hover:before,
label:hover span.info-tip[tipTitle]:hover:before,
p:hover abbr[tipTitle]:hover:after,
li:hover abbr[tipTitle]:hover:after,
dl>*:hover abbr[tipTitle]:hover:after,
label:hover abbr[tipTitle]:hover:after,
p:hover dfn[tipTitle]:hover:after,
li:hover dfn[tipTitle]:hover:after,
dl>*:hover dfn[tipTitle]:hover:after,
label:hover dfn[tipTitle]:hover:after,
p:hover span.info-tip[tipTitle]:hover:after,
li:hover span.info-tip[tipTitle]:hover:after,
dl>*:hover span.info-tip[tipTitle]:hover:after,
label:hover span.info-tip[tipTitle]:hover:after {
visibility: visible;
transition: visibility 0s linear .3s;
-moz-transition: visibility 0s linear .3s;
}

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

Ответ 4

Чтобы получить это из названия, я бы использовал метод data():

$(document).ready( function () {
    $('.items_with_title').each( function () {
        $(this).data('title', $(this).attr('title') );
        $(this).removeAttr('title');
    });
});

// to access it
$(document).ready( function () {
    $('A').click( function () {
        alert($(this).data('title'));
    });
});

Вы также можете сделать селектор для любого элемента с атрибутом title:

$('*[title]').each(...

Ответ 5

Оригинальный плакат только хотел отключить собственное действие .tooltip(). Если это так, используйте следующее простое решение:

$(function() {
    $( document ).tooltip({
        items: "[data-tooltip]",
        content: function() {
            var element = $( this );
            if ( element.is( "[data-tooltip]" ) ) {
                return element.attr('data-tooltip');
            }
        }
    });
});

Теперь атрибут [title] отключен, и всплывающая подсказка будет запускаться только тогда, когда у элемента есть атрибут [data-tooltip]. Определяя большее количество "элементов", вы можете создавать разные поведения и стили:

$(function() {
    $( document ).tooltip({
        items: "[data-tooltip],img[alt]",
        content: function() {
            var element = $( this );
            if ( element.is( "[data-tooltip]" ) ) {
                return element.attr('data-tooltip');
            }
            if ( element.is( "[alt]" ) ) {
                return element.attr('alt') + something_else;
            }
        }
    });
});

http://jqueryui.com/tooltip/#custom-content и http://api.jqueryui.com/tooltip/#option-items

Ответ 6

var tempTitle = "";
$('a[title]').hover(
    function(e){
         e.preventDefault();
         tempTitle = $(this).attr('title');

         $(this).attr('title', '');

             $(this).mousedown(
                function(){
                    $(this).attr('title', tempTitle);
                }
            );
    }
   ,
   function() {
       $(this).attr('title', tempTitle);
   }
);

Попробуйте это, как собака!

Ответ 7

Я знаю, что это сообщение о JQuery, но я просто столкнулся с этой проблемой и в основном связан с lighboxes, поэтому здесь исправление Mootools для iaian7 Mediabox Advanced на ссылках на изображения, если кому-то это нужно Исправление будет работать и на любом из них http://line25.com/articles/rounding-up-the-top-10-mootools-lightbox-scripts

if ($$('.lbThumb').length > 0) { //  lbThumb a class or what ever you are using
    $$('.lbThumb').each(function (el) { // same here , your a class

        var savedtitle = el.get('title');
        var getimage  = el.getElement('img'); 
                    // must use image click since Mediabox will kill our a element click
        getimage.addEvent('click', function () {
            el.set('title',savedtitle );
        });
        // hide nasty a tooltip 
        el.addEvents({
        mouseenter: function () {
          el.erase('title');
        },
        // bring it back 
        mouseleave: function () {
          el.set('title',savedtitle );

        }
      });

   });
}

Ответ 8

Его работает следующим образом:

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

GetAttribute ( 'stitle')

Он работает на всех.

Ответ 9

Вы можете подключить событие "mouseenter" и вернуть значение false, которое остановит отображение всплывающих подсказок.

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

Ответ 10

var title;
$('a[title]').hover(function () {
   title = $(this).attr('title');
   $(this).attr('title','');
}, function () {
   $(this).attr('title',title);
});

Ответ 11

Вот еще один побочный эффект, который вам может пригодиться, если вы используете плагин Lightbox JS, которому по-прежнему нужен атрибут "title" для обработки заголовков на слайдах лайтбокса:

$('a.lightbox-trigger').each(function() { // Process all lightbox trigger links

    $(this).mouseover(function() {
        if(!$(this).data('keep'))  // 1st time = FALSE, so make the swap
            $(this).attr('data-title', $(this).attr('title')).attr('title', '');
        $(this).data('keep', true); // Preserve value if hovered before clicked
    });

    $(this).mousedown(function() {
        $(this).attr('title', $(this).attr('data-title')).attr('data-title', '');
        $(this).data('keep', false); // Mark element as safe to swap again
    });
});