禁用默认工具提示

Disabling default tooltip

本文关键字：工具提示 默认      更新时间：2023-09-26

这里有一个工具提示脚本，http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/.它在所有浏览器中都能很好地工作，但默认的工具提示在IE中没有被禁用。

如何更新以下脚本以禁用默认工具提示？

<script type="text/javascript">
$(document).ready(function() {
   // Tooltip only Text
   $('.masterTooltip').hover(function(){
         // Hover over code
         var title = $(this).attr('title');
         $(this).data('tipText', title).removeAttr('title');
         $('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow');
    }, function() {
         // Hover out code
         $(this).attr('title', $(this).data('tipText'));
         $('.tooltip').remove();
    }).mousemove(function(e) {
          var mousex = e.pageX + 20; //Get X coordinates
          var mousey = e.pageY + 10; //Get Y coordinates
          $('.tooltip').css({ top: mousey, left: mousex })
    });
});
</script>

我认为没有任何理由将title属性添加回blur上的元素。您将其存储在jQuery元数据中。我的猜测是这就是为什么IE仍然显示它。删除行

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

看看这是否能解决问题。

编辑：这错过了一些要求。这是未经测试的，但可能有效：

$(document).ready(function() {
    $('.masterTooltip').each(function() {
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
    }).hover(function(){
        $('<p class="tooltip"></p>')
        .text($(this).data('tipText'))
        .appendTo('body')
        .fadeIn('slow');
    }, function() {
        $('.tooltip').remove();
    }).mousemove(function(e) {
        var mousex = e.pageX + 20;
        var mousey = e.pageY + 10;
        $('.tooltip')
        .css({ top: mousey, left: mousex })
    });
});

请注意，这是次优的，因为它在each块中调用$(this)两次，但这应该很容易修复。

我有一个简单的解决方案来禁用IE或其他浏览器左/右下角显示的默认工具提示。[如果你的默认工具提示和我提到的一样]

只需编写一个简单的javascript函数

function GoToLink()
    {
        location.href = "mypage.htm";
    }

在类似的标签中调用此函数

<a id="204" name="wow" class="SettPage" href="" onclick="GoToLink()">
相关文章：