Twitter dinámico bootstrap tooltips para jQuery UI Slider

Question

¿Cómo puedo agregar tooltip en la parte superior de cada manejador de control deslizante de jQuery Ui usando la información sobre herramientas del control deslizante de Twitter que cambia dinámicamente a medida que las diapositivas del usuario?

Se me ocurre esto, pero no es uniforme y, a veces, la información sobre herramientas desaparece y no es estable. En otras palabras, realmente no funciona bien.

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

Su descripción emergente desaparece y parpadea porque es lo que el plugin se diseñó también, así que en lugar de utilizar el sistema de arranque propio plugin (que para mí sería un dolor de modificar para esta tarea), puede simplemente utilizar su markup y css y reconstruirlo dentro de jQueryUI. Prueba esto, por ejemplo:

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

Usando este método podemos reconstruir la información sobre herramientas en la parte superior de cada tirador del mando que utiliza el mismo CSS como la información sobre herramientas de arranque junto con nuestra propia clase que podemos modifica fácilmente para posicionarlo. De este modo:

CSS

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

Demo, editar here.

Answer 2

Existe un hilo conocido relacionado con el de Github/Bootstrap como un problema: Twipsy tooltip with an unreachable link inside.

allí se puede ver como uno de los creadores dice:

no hay una manera de hacer esto. Nuestros tooltips no fueron diseñados para tener contenido interactivo. Si lo desea, su mejor opción sería rodar una solución personalizada que contenga la información sobre herramientas dentro del elemento que está siendo desplazada, de modo que el evento mouseout no se active.

Y un par de meses más tarde:

Oh, en realidad en 2.0 se puede hacer la colocación: "dentro de la parte superior" y se inserte el borracho en el interior del elemento que se está mantenido. Tendrá que hacer para trabajar con CSS desde allí para asegurarse de que no hereda los estilos, etc. No estoy seguro de si esto realmente llegará a la versión 2.0 final.