我有一个 MVC 应用程序,它广泛使用qtips2来显示气泡工具提示。显示的内容包括Cufon
字体。工具提示在和中完美显示Chrome
,但是当我将鼠标悬停在应该弹出工具提示而不是显示工具提示的文本上时,整个屏幕变白。如果我右键单击空白屏幕并转到源代码,那么我会看到以下内容而不是页面内容:Firefox
Safari
IE 9
<style type="text/css">cufoncanvas{text-indent:0!important;}@media screen{cvml\:shape,cvml\:rect,cvml\:fill,cvml\:shadow{behavior:url(#default#VML)!important;display:block!important;antialias:true!important;position:absolute!important;}cufoncanvas{position:absolute!important;text-align:left!important;}cufon{display:inline-block!important;position:relative!important;vertical-align:text-bottom!important;}cufon cufontext{position:absolute!important;left:-10000in!important;font-size:1px!important;}a cufon{cursor:pointer}}@media print{cufon cufoncanvas{display:none!important;}}</style>
这个样式标签是源代码中唯一显示的东西。
以下是源中工具提示的示例:
<mark data-url="../Tooltips/Tourism">tourism</mark>
并且初始化qtips的源码如下:
$(function () {
$('[data-url]').each(function (i) {
var element = $(this);
element.qtip({
content: {
text: "Loading...",
ajax: {
url: element.data('url')
}
},
position: {
viewport: $(window)
}
});
});
});
有谁知道为什么会出错IE 9
并知道解决此问题的方法?如果做不到这一点,有没有人有其他jQuery
工具提示插件的经验,这些插件可以很好地处理Cufon
字体并在所有现代浏览器中可靠地工作?