使用jQuery隐藏原生工具提示

时间：2009-08-19 12:59:00

标签： jquery tooltip

当用户将鼠标悬停在具有title属性的锚标记上时，有没有办法隐藏原生工具提示操作？我不想删除它只是不显示令人讨厌的黄色框，这是默认的工具提示操作。

更新：

在阅读了其他几篇帖子后，我认为我不能隐藏原生工具提示动作的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...
});

11 个答案:

答案 0 :(得分：24)

显然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() { }
);

除了经过测试后似乎没有用。

答案 1 :(得分：4)

您可以通过以下方式将其删除：

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

这将仅为js-users删除它，因此它仍然可供搜索引擎访问和查找。

答案 2 :(得分：4)

我在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;
}

在我需要的地方提供漂亮的工具提示，而不会同时显示默认工具提示。

答案 3 :(得分：2)

要将其从标题中删除，我将使用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(...

答案 4 :(得分：2)

原始海报只想禁用.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＆amp; http://api.jqueryui.com/tooltip/#option-items

答案 5 :(得分：1)

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);
   }
);

尝试它像狗一样工作！

答案 6 :(得分：1)

我知道这是关于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 );

        }
      });

   });
}

答案 7 :(得分：1)

它的作品如下：

重命名为sTitle而不是默认的title属性，如果你需要从Jquery调用它：

的getAttribute（＆＃39; stitle＆＃39）

它适用于所有人。

答案 8 :(得分：1)

您可以挂钩'mouseenter'事件并返回false，这将停止显示原生工具提示。

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

答案 9 :(得分：1)

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

答案 10 :(得分：-1)

如果您使用灯箱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
    });
});
相关问题
最新问题