使用 jQuery 隐藏本机工具提示

Question

提问by Phill Pafford

Is there a way to hide the native tooltip action when a user hovers over a anchor tag with a title attribute? I don't want to remove it just don't display the nasty yellow box that is the default tooltip action.

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

UPDATE:

更新：

After reading a couple of other posts I don't think I can hide the title attribute for the native tooltip action, but I'm trying to think outside of the box here. Could I use another attribute instead of the title attribute inside the anchor tag and still keep a valid page???

在阅读了其他几篇文章后，我认为我无法隐藏本机工具提示操作的标题属性，但我试图在这里跳出框框思考。我可以在锚标记内使用另一个属性而不是标题属性，并且仍然保持有效页面吗？？？

Removing the title attribute value is not an option unless someone can figure out how to add it back for a onclick event?

删除标题属性值不是一个选项，除非有人能弄清楚如何将它添加回 onclick 事件？

WORKING CODE BELOW

下面的工作代码

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

Answer 1

回答by tvanfosson

Apparently the title attribute doesn't fall under the normal event handler. Anyway, my original answer didn't work, though I'll keep playing with it to see if I can get it to work. If you need to retain the title attribute but don't want the popup effect, as indicated in your comments, then store the title attribute in the element's data and use it from there.

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

Original answer:

原答案：

Give every element that has a title a specific hover over handler that prevents the default action.

为每个具有标题的元素提供一个特定的悬停处理程序，以防止默认操作。

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

Except after testing it doesn't seem to work.

除非经过测试，它似乎不起作用。

Answer 2

回答by Fabian Buch

You can remove it by:

您可以通过以下方式删除它：

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

This will remove it for js-users only, so it's still accessable and findable for search engines.

这将仅为 js 用户删除它，因此它仍然可以被搜索引擎访问和查找。

Answer 3

回答by Chris

I used a variation on bEj ni c bEj's code, because I needed to preserve the title content on hover, but still needed to suppress the default behavior.

我使用了 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);
   }
);

This allows me to do this in my stylesheet: /* 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 & 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;
}

Giving me pretty tooltips where I need them, without the default tooltip appearing simultaneously.

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

Answer 4

回答by IT-Smart

The original poster only wanted to disable the native action of .tooltip(). If that is the case, use the following simple solution:

原发帖者只想禁用 .tooltip() 的原生动作。如果是这种情况，请使用以下简单的解决方案：

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

Now the [title] attribute is disabled and the tooltip will only trigger when an element has a [data-tooltip] attribute. By defining more 'items' you can create different behavior and styles:

现在 [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

Answer 5

回答by MacAnthony

To get it out of the title, I would use the data() method:

为了让它脱离标题，我会使用 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'));
    });
});

You could also make the selector for any item that has a title attribute:

您还可以为任何具有标题属性的项目创建选择器：

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

Answer 6

回答by bEj ni c bEj

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

Try it works like a dog!

试试它像狗一样工作！

Answer 7

回答by Ali El Menini

Its works like this:

它的工作原理是这样的：

Rename to sTitle instead of default title attribute and if you need to call it from Jquery:

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

getAttribute('stitle')

getAttribute('标题')

It works on all.

它适用于所有人。

Answer 8

回答by nevf

You can hook the 'mouseenter' event and return false which will stop the native tooltips from being displayed.

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

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

Answer 9

回答by Morteza QorbanAlizade

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

Answer 10

回答by Benn

I know this is post about Jquery but I just ran in to this issue and is mostly connected with lighboxes so here is Mootools fix for iaian7 Mediabox Advanced on image links if anyone needs it The fix will work on any of these also http://line25.com/articles/rounding-up-the-top-10-mootools-lightbox-scripts

我知道这是关于 Jquery 的帖子，但我刚刚遇到了这个问题，并且主要与灯箱有关，所以如果有人需要，这里是图像链接上 iaian7 Mediabox Advanced 的 Mootools 修复程序该修复程序也适用于这些中的任何一个 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 );

        }
      });

   });
}

使用 jQuery 隐藏本机工具提示

提问by Phill Pafford

回答by tvanfosson

回答by Fabian Buch

回答by Chris

回答by IT-Smart

回答by MacAnthony

回答by bEj ni c bEj

回答by Ali El Menini

回答by nevf

回答by Morteza QorbanAlizade

回答by Benn

相关推荐

最近更新

标签

使用 jQuery 隐藏本机工具提示

提问by Phill Pafford

回答by tvanfosson

回答by Fabian Buch

回答by Chris

回答by IT-Smart

回答by MacAnthony

回答by bEj ni c bEj

回答by Ali El Menini

回答by nevf

回答by Morteza QorbanAlizade

回答by Benn

相关推荐

jQuery 如何使用jquery获取多个复选框值

触发 jQuery UI 滑块事件

jQuery 速记 AJAX 获取请求的异步错误

使用 jquery Ajax 加载 PartialView？

相关推荐

最近更新

标签