バブル ツールチップを表示するためにqtips2を多用する MVC アプリケーションがあります。表示されているコンテンツには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
、最新のすべてのブラウザーで確実に機能する他のツールチップ プラグインを使用した経験のある人はいますか?