0

ツールチップ用の準備ができたjQueryスクリプト（私はJavascriptコーダーではありません）を自分のサイトに実装しました。

問題は、テキストがの間にある場合にのみ、コードがツールチップホバーを許可すること<a></a>です。出しても効果は出ません。DIVを使用してフォーマットする<a></a>ことは、最善の方法ではありません。エフェクトが外部でも機能するJavascriptを実行するにはどうすればよいですか？<a></a>

Javascript

<script type="text/javascript">
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip        
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        } 
        tip.css({  top: mousey, left: mousex });
    });
});

</script>

CSS

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

HTML

<p>Text<a class="tip_trigger" href="#">MouseOver<span class="tip">
<img src="image.jpg" />Show as MouseOver Effect</span></a></p>
4

2 に答える 2

0

私はあなたのコードをざっと見てみましたが、すべてがうまくいくようです。ツールチップが何であるかを示すのはアンカータグではなく、実際には次の構造です。

class ='tip_trigger'> class='tip'。

div .tip_triggerと、その中に.tipクラスを持つ他のタグがある場合があり、それは機能するはずです。

したがって、例をとると、問題は「a」タグ内で.tip_triggerを使用していることですが、次のように「p」タグ内で使用できます。

<p class="tip_trigger"><a href="#">MouseOver<span class="tip">
<img src="image.jpg" />Show as MouseOver Effect</span>Text</a></p>

正しく動作するはずです。

于 2013-01-04T13:07:26.383 に答える
0

たとえば、を使用できます<span/>。

技術的には、クラス名をそこに置く限り、あらゆる種類の要素を受け入れますtip_trigger。

<p>
    Text
    <span class="tip_trigger">MouseOver
        <span class="tip"><img src="image.jpg" />Show as MouseOver Effect</span>
    </span>
</p>​

こちらをご覧ください。

于 2013-01-04T13:04:40.630 に答える