La información sobre herramientas de jQueryUI compite con Twitter Bootstrap

He podido obtener algunos consejos sobre herramientas para trabajar finalmente con el siguiente código:

<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>

y entonces

<script>
    $('[rel=tooltip]').tooltip();
</script>

El problema con el que me estoy encontrando es que está usando información sobre herramientas jQueryUI (sin flechas, información sobre herramientas grandes y feas) en lugar de Bootstraps.

¿Qué necesito hacer para usar la información sobre herramientas de Bootstrap en lugar de jQueryUI?

Tanto la interfaz de usuario jQuery como Bootstrap usan tooltipel nombre del complemento. Use $.widget.bridgepara crear un nombre diferente para la versión de jQuery UI y permita que el complemento Bootstrap permanezca con el nombre de información sobre herramientas (intentar usar la noConflictopción en el widget Bootstrap solo genera muchos errores porque no funciona correctamente; ese problema se ha informado aquí) ):

// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

Entonces el código para hacerlo funcionar:

// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>

Buen código de copiar y pegar que también maneja el conflicto del botón:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

Una solución simple es cargar bootrap.js después de jquery-ui.js, de modo que el método bootstrap .tooltip tenga prioridad.

Esto funcionó para mí:

Si necesita usar JQuery-UI pero desea usar la información sobre herramientas de bootstrap, simplemente obtenga una versión personalizada de JQuery-UI de este sitio web .

Simplemente desmarque la opción "Información sobre herramientas" y descárguela (será algo así como "jquery-ui-1.10.4.custom.js").

Simplemente agréguelo a su proyecto en lugar de la versión que está utilizando actualmente y ya está listo para la fiesta. Esto evitará el conflicto. ¡Funcionó como un encanto para mí!

En caso de que deba cargar jquery-ui.jsdespués, bootstrap.jsaquí se explica cómo hacerlo:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>jQuery.fn.tooltip = _tooltip;</script>

Esto anulará la información sobre herramientas de jquery-ui y siempre usará bootstraps.

Asumiendo que la IU llamará después de inicializar bootsrap

Almacene la función de arranque justo antes de que se inicialice la IU

jQuery.fn.bstooltip = jQuery.fn.tooltip; 

Entonces llámalo como sigue

$('.targetClass').bstooltip();

Esta solución parece funcionar bien para mí.

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

¿Qué tal simplemente usar popovers Bootstrap en su lugar? Los popovers de BS no crean el mismo conflicto aunque requieren el mismo componente tooltip.js. Sí, están más estilizados, pero no hacen que mis botones JQuery UI se vuelvan torpes.

Estoy usando Jquery UI solo para autocompletar / cuadros combinados personalizados (por lo que no puedo afirmar que otros controles JQ-UI estén bien) y ninguno de los anteriores funcionó para solucionar el problema de CSS en los botones de cuadro combinado que se vuelven "sin estilo" al invocar BS Tooltips. Cambiar a BS Popovers proporcionó esencialmente el mismo efecto sin conflictos, sin reordenamiento de las importaciones de mi script y sin necesidad de declaraciones puente explícitas.

intente usar jQuery.noConflict () y vea si eso le ayuda en algo. Parece que bootstrap y jQuery están usando el mismo espacio de nombres, y tal vez las sugerencias de herramientas de bootstrap y jQuery se cargan en la misma función, o una se carga primero.

También puede verificar para ver qué biblioteca se carga primero. Por lo general, si declara la misma función dos veces en javascript, la segunda es la que se utiliza.

En tercer lugar, verifique el paquete jQueryUI ( en su sitio web) y vea si puede descargar una versión que no tenga la información sobre herramientas incluida (verifiqué y esto es totalmente factible).

Hay una solución fácil y buena, solo reorganice su enlace de arranque y jquery ui file de esta manera:

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

Simplemente cargue jQueryui antes de cargar el archivo boostrap js. Es trabajo para mi.

Una manera fácil es cargar bootstrap.js después de jquery-ui.js, de modo que el bootstop .tooltip anule las interfaces de usuario de jquery. Si está utilizando un cargador de módulos como requirejs, puede hacer que bootstrap dependa de jquery-ui, como tal:

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...