0

ニュース記事を取り上げたいのですが、誰かがテキストの特定の部分 (青いハイパーリンクではない) にマウス カーソルを合わせると、

  1. （クリックせずに）その特定の文に関する記事の注釈/コメントを含むポップアップが表示されます。
  2. 終了するためにクリックする必要があるダイアログ ボックスではなく、スムーズなアニメーション。

私は周りを見回しましたが、まともな例を見つけることができません。これは大丈夫です。

何を使用するかについてのアイデアはありますか？jQuery? もしそうなら、何か良い提案はありますか？

4

3 に答える 3

1

このjqueryツールチッププラグインを使用できます

非常に使いやすく、ツールチップの内容は純粋な HTML であるため、非常にカスタマイズ可能で柔軟です。

サンプル コードを書く代わりに、デモ ページを紹介します。

これがお役に立てば幸いです。より具体的なものが必要な場合はお知らせください。

于 2013-02-06T16:03:35.607 に答える
0

必要なプロパティのいくつかを持つcssクラスを作成します。

.ZoomIt
{
   position:relative;
   z-index:99;
   height: 200px;
   width: 200px;
}

そして、ホバーイベントでクラスを切り替えます

$('yourTextualDiv').hover(function(){
     $(this).toggleClass('ZoomIt');
});
于 2013-02-06T15:59:23.240 に答える
0

フル機能のツールチップ プラグインが必要な場合は、Tooltipsterをご覧ください。ドキュメントでそれを参照するだけです...

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>

...そして、ツールチップの複雑さに応じて、さまざまな方法でツールチップを追加できます。

<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />

それを有効にするために必要なのは、どこかに小さな JS ブロックを配置することだけです。

<script>
    $(document).ready(function() {
        $('.tooltip').tooltipster();
    });
</script>

私はこれらの人たちと提携していませんが、彼らについて良いことを聞いています. 自分で巻く必要がある理由がわかりません。

于 2013-02-06T16:02:58.350 に答える