Question

这是一个工具提示脚本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>

Answer 1

我认为没有理由将title属性添加回模糊元素。您将它存储在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 })
    });
});

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

Answer 2

我有一个简单的解决方案来禁用默认工具提示，该工具提示显示在IE或其他浏览器的左/右下方。 [如果您的默认工具提示与我提到的相同]

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

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

在标签中调用此函数，如

<a id="204" name="wow" class="SettPage" href="" onclick="GoToLink()">

禁用默认工具提示

2 个答案: