Dynamische Twitter Bootstrap-Tooltips für jQuery UI Slider

Question

Wie kann ich mithilfe der Twitter Slider Tooltip, die dynamisch Änderungen als Benutzer Dias Tooltip an der Spitze jedes jQuery Ui Slider-Handler hinzufügen?

Ich komme mit diesem, aber es ist nicht glatt und manchmal die Tooltip verschwindet und nicht stabil. Mit anderen Worten, es funktioniert nicht wirklich gut.

$("#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

Ihr Tooltip verschwindet und flackert, weil das ist, was das Plugin auch entwickelt wurde, so dass anstelle des Bootstrap der Verwendung von selbst-Plugin (das für mich einen Schmerz für diese Aufgabe zu ändern wäre), können Sie einfach ihre Verwendung Markup und CSS und erstellen Sie es in jQueryUI neu. Versuchen Sie dies zum Beispiel:

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>'); 
} 

Mit dieser Methode können wir den Tooltip auf der jeweils Schieber Griff wieder aufzubauen, die die gleiche CSS als Boot Tooltip verwendet zusammen mit unserer eigenen Klasse, die wir können, einfach modifizieren, um es zu positionieren. Wie so:

CSS

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

Demo, bearbeiten here.

Answer 2

Es ist gut bekannt, dass Gewinde bezogen auf Github/Bootstrap als ein Problem: Twipsy tooltip with an unreachable link inside.

Dort kann man sehen, wie einer der Schöpfer sagt:

Es ist kein Weg, dies zu tun. Unsere Tooltips wurden nicht für interaktive Inhalte konzipiert. Wenn Sie dies getan wollen, ist Ihre beste Wette wäre, zu Rolle eine individuelle Lösung, die den Tooltip innerhalb des Elements befindet das schwebte wird, so dass das mouseout Ereignis nicht ausgelöst wird.

Und ein paar Monate später:

Oh, tatsächlich in 2.0 können Sie die Platzierung tun: „innen top“, und es wird das beschwipst innerhalb des Elements einfügen schwebte wird. Sie müssen einige Arbeit mit CSS tun, von dort sicherzustellen, dass es Arten nicht erben, usw. Nicht sicher, ob dies tatsächlich die letzte 2,0 Release macht in.