【发布时间】:2013-06-13 11:37:39
【问题描述】:
我已经开始使用 jQuery 工具的工具提示 (as demonstrated here) 设计页面。
我对其进行了一些修改,以允许 onClick 显示和 onClick 隐藏。在 Chrome、Safari 和 Firefox 中运行良好。
但它不适用于 IE 9,尽管 jquery 工具旨在与跨浏览器非常兼容。
我使用的脚本是:
$(function() {
// initialize tooltip
var tooltip = $("#cog").tooltip({
tipClass: 'usermenu',
effect: 'slide',
bounce: true,
direction: 'down',
slideOffset: 10,
offset: [-5,-38],
delay: 500,
position: 'bottom center',
relative: true,
events: {
def: ",", // default show/hide events for an element
input: ",", // for all input elements
widget: ",", // select, checkbox, radio, button
tooltip: "," // the tooltip element
},
onBeforeShow: function() {
document.getElementById("cog_img").classList.toggle('inactive_cog_img');
document.getElementById("cog_img").classList.toggle('active_cog_img');
},
onHide: function() {
document.getElementById("cog_img").classList.toggle('inactive_cog_img');
document.getElementById("cog_img").classList.toggle('active_cog_img');
}
});
tooltip.click(function() {
var tip = $(this).data("tooltip");
if (tip.isShown(true))
tip.hide();
else
tip.show();
});
});
在哪里
#cog 是触发器,
usermenu 是工具提示 DIV
为了现场观看,我制作了一个示例页面: http://test.theshananway.com/test.html(见右上角的齿轮)
请帮我想办法让它在 IE 中运行,或者让我知道是否有 IE 替代方案?
谢谢!
【问题讨论】:
-
我设法通过删除“opacity:0;”使其工作来自用户菜单 div 的内联样式。但是,您会遇到覆盖齿轮图标的箭头的问题,从而难以隐藏工具提示)
-
我无法手动控制内联不透明度,因为 jquery 插件效果是改变它的一个。有什么办法吗?
标签: javascript jquery cross-browser tooltip jquery-tools