jQuery 自定义工具提示（不是 ui）仅在 IE7 中不起作用答案

【问题标题】：jQuery custom tooltip (not ui) not working in IE7 onlyjQuery 自定义工具提示（不是 ui）仅在 IE7 中不起作用
【发布时间】：2012-10-03 04:02:35
【问题描述】：

我有一个 自定义工具提示 功能（在 jQuery 中），它在所有 [主要] 浏览器（甚至在 IE8 中）都很好用除了IE7。

网站的文档类型是较新的 html 5 doctype (<!DOCTYPE html>)。

有 5 个链接/图片。 IE7 正确显示第一个工具提示（减去一些小的布局问题 - 但可以修复），但在其他链接（图像）上，它会恢复为其余的原始浏览器工具提示。

$('#port-window a').hover(function() {
        var tip = $(this).attr('title');
        $(this).attr('title','');
        $(this).append("<div id='tooltip'>"+ tip +"</div>");
        $("#tooltip")
            .css("position","relative")
            .css("z-index","999")
            .fadeIn("slow");
    }, function() {
        $(this).attr('title',$('#tooltip').html());
        $(this).children('div#tooltip').remove();
    });

标题的HTML是这样的：

<ul class="portfolio">
      <li>
        <div id="port-window">
            <a title="This is the title" href="[blogurl]/work/web-design-dev/website/">
                <span class="window"></span>
                <span class="gradient"></span>
                <img src="[blogurl]/portfolio-images/thumbs/image.jpg" alt="alt tag info" title="img title attr - not used" />
            </a>
        </div>
      </li>
</ul>

谁能解释一下如何解决这个问题？

【问题讨论】：

你在title属性中使用了什么？是否发生任何错误？
你能在 jsfiddle.net 中提供一个工作小提琴吗？
大家好。上面添加了html。我将在 jsFiddle 上工作并很快提供一个链接。不要介意href标签-这些标签严格用于wordpress
jsfiddle.net/designer84/Xg7ru。这会给你一个大致的想法......
我不确定这是否有很大帮助，但是当鼠标悬停在第二张和第三张图像上时，IE7 不会触发 mouseover 事件。试试 console.log('Event !') 鼠标悬停 & 你会发现我在说什么。

标签： jquery internet-explorer-7

【解决方案1】：

在 IE7 中检查这个http://jsfiddle.net/Xg7ru/1/

你所犯的错误并不难发现，你在一个页面中使用了 id #port-window 3 次，这对于 CSS 来说通常不是问题，但是 jQuery 将使用给定的 DOM 重新返回第一个元素ID 因此它适用于第一张图片。我真的不确定它在其他浏览器中是如何工作的。

我将 HTML 标记从 id='port-window' 更改为 class='port-window' 并相应地更改了 JS、CSS 中的选择器，现在它在 IE7 中对我来说似乎工作正常。

编辑：根据规范，给定 ID 只能有一个 DOM 节点

【讨论】：

天哪，这怎么能瞒过我？我已将它们更改为类，现在可以正常工作。谢谢你指出我的白痴

【解决方案2】：

我认为问题可能出在.attr() 方法上。

您可能想尝试改用.prop() 方法。

两者非常相似，但它们之间有区别，实际上大多数时候.prop()是正确的。

更重要的是，我相信.attr() 和旧版本的IE 存在错误，所以有些东西可以在.prop() 上工作，而在.attr() 上不工作。这可能是其中一种情况。

我没有 IE7 可以在你的代码上试用它，所以你必须尝试它并告诉我它是否有效。

参考：

希望对您有所帮助。

【讨论】：

【解决方案3】：

主要问题是您有多个 id="port-window" 对象。你不能这样做 - 每个 id 一个对象。将它们更改为一个类。我会推荐这个在 IE7 中工作的代码（并将 CSS 更改为使用 .port-window 而不是 #port-window）：

<ul class="portfolio">
    <li>
        <div class="port-window">
            <a data-title="TITLE 1" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
    <li>
        <div class="port-window">
            <a data-title="TITLE 2" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
    <li>
        <div class="port-window">
            <a data-title="TITLE 3" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
</ul>

工具提示存储在数据项中（因此您不必清除它），它只是跟踪新的 div 而不必再次找到它：

$('.port-window a').hover(function() {
    $("<div id='tooltip' style='display: none; position: relative; z-index: 999;' >" +
            $(this).data('title') + "</div>")
        .insertAfter(this)
        .fadeIn("slow");
}, function() {
    $('#tooltip').remove();
});

使用您的 HTML 的工作演示（加上修复）：http://jsfiddle.net/jfriend00/LsnnH/

【讨论】：

我明白你为什么会这样建议，但使用title 属性确实具有优雅回退的优势。诚然，这个问题描述了一个不太优雅的回退，但我确信它可以在仍然使用 title 的同时进行排序。
@Spudley - 使用您必须清除然后放回的标题属性对我来说似乎很愚蠢，因此我将其移至数据标题属性以使其更简单。这种变化与解决问题无关，但这样对我来说似乎更干净。
.hide().css("position","relative").css("z-index","999");您不必为此使用 jQuery，而是将它们放在 #tooltip 的样式中会更有意义。
@designer84 - 将我的代码放在 OP 的 jsFiddle 中（只需对 HTML 进行一点改动），它就可以在 IE7 中运行：jsfiddle.net/jfriend00/LsnnH。
@tea_totaler - 也进行了这些更改。