プラグインなしでjqueryでツールチップを作成するにはどうすればいいですか？

私は長年にわたっていくつかの異なるツールチッププラグインを使用してきましたが、私は自分自身を書く時間になったと思います。単純に、すべてのオプションを持つプラグインを探しているわけではありません。どのように表示され、動作するようにポップアップするすべてのツールチップが必要なのか分かります。ほとんどのプラグインにはさまざまなアニメーションやポジションが用意されていますが、あなたの助けを借りて、私が作成したい軽量のものには過剰なものがあると思います:)プラグインなしでjqueryでツールチップを作成するにはどうすればいいですか？

基本的に、ホバーのタイトル属性を使用して、ホバリングされている要素の真上に表示され、要素の中央に表示されます。

私は表示されるdivを作成する方法を知っていますが、私が解決しようとしているのは、そのdivが要素の真上に位置するように指示する方法です。

これは最小限のコードで行うのが理想です。上記のコードは、単にツールチップを埋めるために起こっているとホバー要素に対して配置されていないもちろんの

<html> 
<head> 

<style type="text/css"> 

    #myToolTip { display: none; } 

</style>

<script type="text/javascript"> 

$(document).ready(function() { 

    $('.hoverAble').hover(function(){ 

     var tip = $(this).attr('title'); 

     $('#myToolTip').html(tip).fadeIn(); 

    }, function() { 

     $('#myToolTip').fadeOut(); 

    } 

}); 
</script> 
</head> 
<body> 

<div id="myToolTip"></div> 

<div class="hoverAble" title="I am good at code"></div> 

</body> 
</html>

：私のロジックは次のようなもの（擬似コード）を言います。それは私の理解が不足しているところです。手伝ってくれますか？

編集：説明のために、私はツールチップをマウスで動かすことを望んでいません。

出典

2009-08-10 willdanceforfun

はバグレディ（関数（）{}）があります。ブラケットがありません！そのジョンのための –

tx！ – willdanceforfun

は、jQueryの中の様々なCSS functionsを見て、主にoffset()と多分height() 。

// pseudocode, assuming #tooltip has position: absolute 
// do something similar with the left offset as well 
$('#tooltip').css({ top : $('#link').offset().top + 10 + 'px' });

これは、あなたが探していると思うリンクの上または近くにツールチップを静的に置きます。ツールチップをマウスで動かすには、mousemoveイベントの位置を動的に更新する必要があります。

出典

2009-08-10 12:41:07 deceze

これはそれだと思います。そこにあるCSSの機能を見るのがはっきりしているようです。 – willdanceforfun

topはうまくいくようですが、私の 'left'属性は何もしないようです：$（ '＃tooltip'）。css（{top：$（this））.offset（）。top - 50 + 'px '、左：$（これ）。オフセット（）}）; - 何か案は？ – willdanceforfun

'offset（）'は "top"属性と "left"属性を持つオブジェクトを返します。したがって、 'offset（）。left'を使う必要があります。「px」も添付しましたか？ – deceze

特定のコード例がない場合、イベントオブジェクトの内容を見ることができます（これはonmouseoverイベントでこれを行うと仮定しています）。

本のあなたのclientXとclientYプロパティプロパティは

は、イベントオブジェクトのための次の項目をチェックしてください助けるべきである：

http://www.javascriptkit.com/jsref/event.shtml

出典

2009-08-10 12:40:01

これはあなたに役立つと思います。

<html> 
<head> 
<style type="text/css"> 
    #myToolTip { display: none;position:absolute; } 
</style> 
<script type="text/javascript" src='js/jquery.js'></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $('.hoverAble').hover(function(e){ 
     var left = mouseX(e); 
     var top = mouseY(e); 
     var tip = $(this).attr('title'); 

     $('#myToolTip').css('top',top); 
     $('#myToolTip').css('left',left); 
     $('#myToolTip').html(tip).fadeIn(); 


    }, function() { 

     $('#myToolTip').fadeOut(); 

    }) 

});

マウス位置：

function mouseX(evt) { 
if (evt.pageX) return evt.pageX; 
else if (evt.clientX) 
    return evt.clientX + (document.documentElement.scrollLeft ? 
    document.documentElement.scrollLeft : 
    document.body.scrollLeft); 
else return null; 
} 

function mouseY(evt) { 
if (evt.pageY) return evt.pageY; 
else if (evt.clientY) 
    return evt.clientY + (document.documentElement.scrollTop ? 
    document.documentElement.scrollTop : 
    document.body.scrollTop); 
else return null; 
} 
</script> 
</head>

HTML：

<body> 

<div id="myToolTip"></div> 

<div class="hoverAble" title="I am good at code">hi catch me</div> 

</body> 
</html>

出典

2009-08-10 12:52:12

私はより具体的にすべきでした。私は先端をマウスで動かすことを望んでいません。現在の要素のちょっと上です。 – willdanceforfun

<div title="This is tooltip">Hover Me</div>

このシンプルなツールチップが私のために働いています。スタイリッシュにするためにクラスを追加することができます。

出典

2009-08-10 13:18:45 NAVEED

組み込みのjQuery.UIツールチップを使うのが簡単です。あなたのコード内

$(document).tooltip();

とHTMLでの "タイトル" タグのすべてのツールチップに変わり

...

<div class="juppiduppi" title="Here is a tooltip, just for you. ">Over here with the mouse... </div>

出典

2013-10-06 21:43:34 huncyrus

プラグインなしでjqueryでツールチップを作成するにはどうすればいいですか？

答えて

関連する問題