0

e コマース プロジェクトに取り組んでおり、結果をフィルタリングするために、価格範囲のスライダー バーがあります。顧客がスライダーをスライドして価格範囲を修正すると、価格範囲の変更を示すスライダー ハンドルの下部にツールチップを表示したいと考えています。

私のスライダーとスライダーハンドルのコード-

<div class=​"ui-slider-range ui-widget-header ui-corner-all" style=​"left:​ 0%;​ width:​   100%;​">​&lt;/div>​
<a class=​"ui-slider-handle ui-state-default ui-corner-all" href=​"#" style=​"left:​ 0%;​" data-original-title title>​&lt;/a>​
<a class=​"ui-slider-handle ui-state-default ui-corner-all" href=​"#" style=​"left:​ 100%;​">​&lt;/a>​

この既存のコードにツールチップを追加するにはどうすればよいですか?

4

1 に答える 1

0

質問に Twitter-bootstrap のタグを付けていることに気付きました。プロジェクトでそれを使用していると思いますか?

もしそうなら、rel="popover" data-placement="bottom" 属性をタグに追加できますか。例えば

<a class=​"ui-slider-handle ui-state-default ui-corner-all" rel="popover" data-placement="bottom" href=​"#" style=​"left:​ 0%;​" data-original-title title>​&lt;/a>​

次に、jQuery で、項目を選択して詳細を追加するだけです。

$("#sliderId").tooltip({
animation: true,
title: "Your title here"
});

ブートストラップで有効にできる属性のリストはこちら

それができない場合は、ツールチップが既に有効になっている素敵なスライダーを無料で利用できます: Boostrap 用の Eyecon スライダー

次のコメントを編集しました：

データをバインドする方法に応じて、データを渡すことができるはずです-グリッドビュー内にある例をコピーしました。

<a class="photoPopover" href="#" rel="popover" data-placement="right" data-content="<img src='<%#Eval("ImageURL")%>'/>"></a>
于 2013-08-13T07:15:37.713 に答える