Question

〜我正在使用jQuery工具提示脚本的一个稍微修改过的版本：http://cssglobe.com/lab/tooltip/01/ - 我做的唯一修改就是将其设置为在常规链接之外启动区域链接上的工具提示。在上面链接的示例中，IE浏览器没有问题 - 内置的IE工具提示未显示，只显示自定义的工具提示。但是在我的页面上，除了自定义工具提示之外，IE中的内置工具提示仍然显示。知道是什么导致了这个吗？

以下是我正在使用的脚本：

this.tooltipText = function () {
    /* CONFIG */
    xOffset = 0;
    yOffset = 0;
    /* END CONFIG */
    $("a.tooltipText, area.tooltipText").hover(function (e) {
        this.t = this.title;
        this.title = "";
        $("body").append("<p id='tooltipText'>" + this.t + "</p>");
        $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
    }, function () {
        this.title = this.t;
        $("#tooltipText").remove();
    });
    $("a.tooltipText, area.tooltipText").mousemove(function (e) {
        $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
    });
};
// starting the script on page load
$(document).ready(function () {
    tooltipText();
});

以下是来自html的示例，用于触发工具提示：

<area shape="rect" coords="9,359,617,391" href="/link-here/" onclick="window.open(this.href,'','toolbar=no, location=no, addressbar=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=510, height=580, top=50, left=150'); return false;" target="_blank" class="tooltipText" title="<strong>First part bold</strong>  Rest of tooltip text goes here <strong>Read More...</strong>" />

我无法弄清楚我在做什么与这里使用的脚本不同：http://cssglobe.com/lab/tooltip/01/

一如既往，非常感谢任何帮助!!

Answer 1

在另一个标记的属性中嵌套标记是无效的html，可能是IE问题的来源

为了将标题的全文保留在title属性中，并且仍然可以将其分为粗体和正常，您可以使用像“|”这样的分隔符当在脚本中构造工具提示时，在分隔符处拆分标题。

<img title="This will be bold | this is normal" src=""/>

修改后的代码

this.tooltipText = function () {
/* CONFIG */
xOffset = 0;
yOffset = 0;
/* END CONFIG */
$("a.tooltipText, area.tooltipText").hover(function (e) {
    this.t = this.title;
    this.title = "";

    /* split title at pipe delimiter*/
    this.title_parts= this.t.split('|');
    this.tip_content='<strong>'+this.title_parts[0]+'</strong>'+this.title_parts[1]; 

    $("body").append("<p id='tooltipText'><strong>" +/*change===> */ this.tip_content + "</p>");
    $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
}, function () {
    this.title = this.t;
    $("#tooltipText").remove();
});
$("a.tooltipText, area.tooltipText").mousemove(function (e) {
    $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
});

};

编辑：以下将在页面加载时完全删除标题，并存储在元素数据

中

this.tooltipText = function () {
    /* CONFIG */
    xOffset = 0;
    yOffset = 0;
    /* END CONFIG */
    $("a.tooltipText, area.tooltipText").hover(function (e) {
        this.t = $(this).data('title');

        /* split title at pipe delimiter*/
        this.title_parts= this.t.split('|');
        this.tip_content='<strong>'+this.title_parts[0]+'</strong>'+this.title_parts[1]; 

        $("body").append("<p id='tooltipText'><strong>" +/*change===> */ this.tip_content + "</p>");
        $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
    }, function () {
        /*this.title = this.t;*/
        $("#tooltipText").remove();
    }).attr('title', function(index, title){
        $(this).data('title', title);
        return '';
    });
    $("a.tooltipText, area.tooltipText").mousemove(function (e) {
        $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
    });
};

Answer 2

IE中双工具提示问题的解决方案

问题解决了。 IE在IE 6,7,8,9中有这个问题，它将显示工具提示两次。需要告知IE不要显示标题。我在网上找到了一个代码snipet

这不起作用，但我将“alt”更改为title并且bingo它正常工作

' 将snipet放在页面的底部或顶部，工具提示将在IE中正确呈现

自定义工具提示正在创建IE中可见的双工具提示

2 个答案: