Question

我正在使用jQuery 1.9.1和Jquery UI 1.10.2以及jQuery UI网站http://jqueryui.com/tooltip/#custom-style上显示的演示代码。自定义风格的演示显示FireFox下方的箭头指向下方。在IE 8中，相同的演示显示了一个没有箭头的矩形。 Tipsy插件在IE 8下正常工作并正确呈现箭头。在IE 8下有没有人使用jQuery UI工具提示（和箭头）？我没有包含代码，因为它位于上面显示的jqueryui.com链接上。请注意，jsfiddle也不适用于IE 8。我猜这可能就像.css修复一样简单。

Answer 1

我设法通过使用CSS中的jQuery UI图标png文件来使箭头工作。我还学到了一点点。 ui-icons_之后的代码是颜色代码。我向工具提示小部件添加箭头的方法依赖于框和箭头图标之间的颜色匹配，这限制了您的选项（缺少编辑/创建png文件）。显示的示例代码显示工具提示框底部的箭头，并使用jQuery UI Start主题。

CSS：

.ui-tooltip {
    border:0px;
    padding: 10px 10px;
    color: white;
    font:  10px "Helvetica Neue", Sans-Serif bold;
    background: #f7a50d;
}
.arrow {
    width: 16px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -10px;
    background-image: url(../jQuery/Styles/start/images/ui-icons_f7a50d_256x240.png); 
    background-position: -64px -16px;
}

jQuery的：

    jQuery(document).tooltip({
    position: {
        my: "center bottom-5",
        at: "center top",
        using: function (position, feedback) {
            $(this).css(position);
            $("<div>")
            .addClass("arrow")
            .addClass(feedback.vertical)
            .addClass(feedback.horizontal)
            .appendTo(this);
        }
    }
});

如何在IE 8中的jQuery UI 1.10.2工具提示小部件上显示箭头？

1 个答案: