jQuery UI Sliderの動的Twitterブートストラップツールチップ

Question

ユーザがスライドするときに動的に変化するTwitterスライダのツールチップを使用して、各jQuery UIスライダハンドラの上部にツールチップを追加するにはどうすればよいですか？

私はこれを思いついたが、滑らかではなく、ツールチップが消えて安定しないことがある。言い換えれば、実際にはうまくいきません。それはプラグインが、あまりにも、その代わりに（私にとっては、このタスクのために変更するための痛みをされるであろう）自体をプラグインのブートストラップを使用するように設計されたものですので、あなたのツールチップが消えると点滅

$("#mySlider").slider({ 
    range: true, 
    step: 5, 
    min: 100, 
    max: 500, 
    values: [150, 300], 
    slide: function(event, ui){ 
     $('.ui-slider-handle').tooltip('show');   
    } 
}); 

$('.ui-slider-handle').attr('title', 'test').tooltip({trigger:'manual'}); 

Answer 1

、あなたは簡単に使用することができ、そのマークアップとCSSを作成し、jQueryUI内で再構築します。例えば、これを試してみてください：

JS

slide: function(event, ui) { 
     $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>'); 
     $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>'); 
} 

を、我々は我々自身のクラスと一緒に、ブートストラップツールチップと同じCSSを使用し、各スライダーハンドルの上にツールチップを再構築することができ、この方法を使用たちができますそれを位置付けるために容易に変更する。これと同じように：

CSS

.slider-tip { 
    opacity:1; 
    bottom:120%; 
    margin-left: -1.36em; 
} 

Demo、hereを編集します。

Answer 2

Github/Bootstrapに関連するよく知られているスレッドが、問題として：Twipsy tooltip with an unreachable link insideです。そこ

あなたはクリエイターの一つは言う方法を見ることができます。

これを行う方法はありません。私たちのツールチップはインタラクティブなコンテンツを持つように設計されていませんでした。これを望むなら、 は、ホールドされている要素 内のツールヒントを格納するカスタムソリューションをロールバックして、mouseoutイベントが発生しないようにすることをお勧めします。

以降数ヶ月：

ああ、実際には2.0で、あなたが配置を行うことができます：「トップの内側」とそれが推移している要素内ほろ酔いを挿入します。 CSSを使ってスタイルが継承されていないことを確認するには、 などが必要です。最終的に2.0 リリースに入るかどうかは不明です。