0

画像にカーソルを合わせたときに画像の周りにツールチップを表示するために、いくつかのjQueryプラグインを見てきました。しかし、私はそれを見つけることができませんでした。私が探していたのは、ツールチップ内で同じ画像を使用しながら、ロードするためのツールチップと、説明、テキスト、および評価を含むものでした。

だから私は自分で作ることを考えていました、そしてあなたたちがこれを行うための最良の方法についてどう思うか知りたいですか？

一般的な考え方は、一番上に画像の列があり、ユーザーが1つをホバーすると、同じ画像が内側にある丸みを帯びたリタングルが表示され、画像の左側に情報が入力されます。また、サムネイルではなく、ツールチップをフェードアウトさせる必要があります。

そして、これを行うjQueryツールチッププラグインを知っていますか？車輪の再発明をする必要はありません。

<div class="item">
    <div class="thumbail">
        <img src="" alt="" />
    </div>

    <div class="hiddentooltipinfo">
        <div class="tooltipinfo">
            <div class="info">
                <h3>Title</h3>
                <p>Text</p>
            </div>

            <div class="rating">
                <p>85%</p>
            </div>
        </div>
    </div>
</div>
4

2 に答える 2

2
  • 気に入ったツールチップ プラグインが見つかりません。 私は自分でそれを構築したいと思います。正直なところ、喜んでお手伝いします。
  • htmlimg属性を使用して、評価を 10 進値または % 記号付きのパーセントとして入力することをお勧めします。どちらもパーセンテージを明確に示しています。また、必ずおよびattributesを含めwidthheightてください。
  • 私が最も嫌いなプラグインはqTipです。
<!-- You could use this as your markup: -->
<div class="item">
    <div class="thumbail">
        <img src='' width='' height='' title='' alt='' data-rating='' />
    </div>
</div>

<!-- Depending on why you have the extra markup, you could potentially
     Just use the following: -->
<img src='' width='' height='' title='' alt='' data-rating='' />
于 2011-08-04T16:30:23.567 に答える
0

jquery にクールなツールチップ用のプラグインなどが必要な場合は、イメージ タグで ALT プロパティと TITLE プロパティを使用するだけです。

<img src="#" alt="Submit" title="submit">

http://flowplayer.org/tools/tooltip/index.html

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

于 2011-08-04T16:27:59.757 に答える