0
これは、tutorialの後に続く単純なjqueryのツールチップを追加しています。このチュートリアルでは、3つのイメージを使用してツールチップの背景を構築していますが、私は1つを使用したいだけです。今は、特定のテキストにカーソルを合わせると、ツールチップを表示させようとしています。私は単純な間違いをしているのか、コードが意味をなさないのか分かりません。いずれにしても、テキストの上にカーソルを置くとツールチップが表示されません。ここでjqueryのツールチップが、マウスがテキストの上にマウスを乗せたときに表示されない
スクリプトの私のバージョンです：あなたはpタグの幅に左のプロパティを設定
$(this).find('.toolTipWrapper').css({left:this.width-22});
ができますが、設定していない：この行で
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.toolTip').hover(
function() {
this.tip = this.title;
$(this).append(
'<div class="toolTipWrapper">'
+'<div class="toolTipPic">'
+this.tip
+'</div></div>'
);
this.title = "";
this.width = $(this).width();
$(this).find('.toolTipWrapper').css({left:this.width-22})
$('.toolTipWrapper').fadeIn(300);
},
function() {
$('.toolTipWrapper').fadeOut(100);
$(this).children().remove();
this.title = this.tip;
}
);
});
</script>
<style type="text/css">
.toolTip {}
.toolTipWrapper {
width: 175px;
position: absolute;
top: 20px;
display: none;
color: #FFF;
font-weight: bold;
font-size: 9pt;
}
.toolTipPic {
width: 175px;
background: url(tooltip.png) no-repeat;
}
</style>
</head>
<body>
<p class="toolTip" title="This is the tooltip text">Hover over me for tooltip </p>
</body>
</html>
私はpの幅を100に設定しましたが、テキストの上にカーソルを置くと、ここでダウンロードした画像のほんの一部が表示されます。http://flowplayer.org/tools/tooltip/index.html – user701510
あなたが使っているBeacuse .toolTipPicのCSSバックグラウンドである場合は、画像のサイズに幅と高さを設定する必要があります。 – Jeremy