Dynamiczne podpowiedzi do bootstrapu Twittera dla suwaka jQuery UI

Question

Jak mogę dodać podpowiedź u góry każdego suwaka jQuery Ui za pomocą etykiety narzędzia suwaka na Twitterze, która dynamicznie zmienia się jako slajdy użytkownika?

Wychodzę z tym, ale nie jest to gładkie i czasami podpowiedź znika i nie jest stabilna. Innymi słowy, tak naprawdę nie działa dobrze.

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

Twój etykietka znika i miga, ponieważ to właśnie plugin został zaprojektowany też, więc zamiast korzystać z bootstrap plugin się (co dla mnie byłoby ból modyfikacji dla tego zadania), można po prostu wykorzystać swoje znaczniki i css i odbuduj je w jQueryUI. Spróbuj na przykład:

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

Stosując tę ​​metodę możemy odbudować podpowiedź na górze każdego uchwytu suwaka, który używa tego samego css jako bootstrap podpowiedzi wraz z własnej klasy, że możemy łatwo modyfikować, aby go ustawić. Tak:

CSS

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

Demo, edytować here.

Answer 2

Istnieje znany wątek związany z tym na Github/Bootstrap jako problem: Twipsy tooltip with an unreachable link inside.

Można tam zobaczyć, jak jeden z twórców mówi:

Nie ma sposobu, aby to zrobić. Nasze etykiety narzędzi nie zostały zaprojektowane z myślą o zawartości interaktywnej. Jeśli tego chcesz, najlepiej byłoby, gdyby rzucił niestandardowe rozwiązanie, w którym znajduje się etykieta podpowiedzi w elemencie , która jest podnoszona, aby zdarzenie mouseout nie zostało wywołane.

a kilka miesięcy później:

Och, faktycznie w 2.0 można zrobić miejsce docelowe: „wewnątrz wierzchu” i będzie wstawić tipsy wewnątrz elementu jest unosił. Będziesz musiał wykonać pewną pracę z css stamtąd, aby upewnić się, że nie dziedziczy stylów, itd. Nie jestem pewien, czy to rzeczywiście spowoduje przejście do ostatecznej wersji 2.0 .