0

~ 我在http://cssglobe.com/lab/tooltip/01/上使用了 jQuery 工具提示脚本的一个稍微修改过的版本——我所做的唯一修改是将它设置为在区域链接上启动工具提示定期链接。在上面链接的示例中，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/

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

4

2 回答 2

0

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

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

<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");
    });
};
于 2012-06-20T18:08:24.597 回答
0

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

问题解决了。IE 对于 IE 6、7、8、9 有这个问题，它会显示工具提示两次。需要告诉 IE 不要显示标题。我在 tne net 上找到了一个代码片段

<!--[if IE]><script>for(i =0;i<document.images.length;i++){document.images[i].alt='';}</script><![endif]-->

这不起作用，但我将“alt”更改为标题和宾果它可以正常工作

<!--[if IE]><script>for(i =0;i<document.images.length;i++){document.images[i].title='';}</script><![endif]-->' 将代码片段放在页面的底部或顶部，您的工具提示将在 IE 中正确呈现

于 2013-04-18T19:05:59.577 回答