As dicas do jQueryUI estão competindo com o Twitter Bootstrap

Consegui obter algumas dicas de ferramentas para trabalhar finalmente com o seguinte código:

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

e depois

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

O problema que eu estou enfrentando é que ele está usando dicas de ferramentas do jQueryUI (sem setas, grandes e feias) em vez de Bootstraps.

O que preciso fazer para usar as dicas de ferramentas do Bootstrap em vez do jQueryUI?

A interface do usuário do jQuery e o Bootstrap usam tooltipo nome do plug-in. Use $.widget.bridgepara criar um nome diferente para a versão da interface do usuário do jQuery e permitir que o plug-in Bootstrap permaneça com o nome da dica de ferramenta (tentar usar a noConflictopção no widget Bootstrap apenas resulta em muitos erros porque não funciona corretamente; esse problema foi relatado aqui ):

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

Portanto, o código para fazê-lo 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>

Bom código de colar e copiar que também lida com o conflito de botões:

<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>

Uma solução simples é carregar o bootrap.js após o jquery-ui.js, para que o método bootstrap .tooltip tenha precedência.

Isso funcionou para mim:

Se você precisar usar o JQuery-UI, mas quiser usar a dica de ferramenta de inicialização, basta obter uma versão personalizada do JQuery-UI neste site .

Simplesmente desmarque a opção "Dica de ferramenta" e faça o download (será algo como "jquery-ui-1.10.4.custom.js").

Basta adicioná-lo ao seu projeto em vez da versão que você está usando no momento e você está pronto para a festa. Isso evitará o conflito. Funcionou como um encanto para mim!

Caso você precise carregar jquery-ui.jsdepois, veja bootstrap.jsaqui como fazê-lo:

<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>

Isso substituirá a dica de ferramenta do jquery-ui e sempre usará as instruções de inicialização.

Supondo que a interface do usuário será chamada após a inicialização do boot inicial

Armazene a função de auto-inicialização antes da inicialização da interface do usuário

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

Em seguida, chame-o da seguinte forma

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

Esta solução parece funcionar bem para mim.

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

Que tal usar popovers do Bootstrap? Os popovers de BS não criam o mesmo conflito, embora exijam o mesmo componente tooltip.js. Sim, eles são mais estilizados, mas não fazem com que meus botões da interface do usuário do JQuery fiquem esquisitos.

Estou usando a interface do usuário do Jquery apenas para preenchimento automático personalizado / caixas de combinação (portanto, não posso afirmar que outros controles da JQ-UI estão ok) e nenhuma das opções acima funcionou para corrigir o problema de CSS nos botões da caixa de combinação que se tornam "sem estilo" ao invocar as dicas de ferramentas do BS. A mudança para o BS Popovers forneceu essencialmente o mesmo efeito, sem conflitos, sem reordenação das minhas importações de scripts e sem instruções explícitas de ponte necessárias.

tente usar jQuery.noConflict () e veja se isso ajuda você. Parece que o bootstrap e o jQuery estão usando o mesmo espaço para nome, e talvez as dicas de ferramentas do bootstrap e do jQuery sejam carregadas na mesma função ou uma seja carregada primeiro.

Você também pode verificar para ver qual biblioteca é carregada primeiro. Geralmente, se você declarar a mesma função duas vezes em javascript, a segunda é a que é usada.

Em terceiro lugar, verifique o pacote jQueryUI ( no site deles) e veja se você pode baixar uma versão que não possui as dicas de ferramentas incluídas (verifiquei e isso é totalmente factível).

Existe uma solução fácil e boa, basta reorganizar o link do arquivo de bootstrap e jquery ui da seguinte maneira:

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

Basta carregar o jQueryui antes de carregar o arquivo boostrap js. É trabalho para mim.

Uma maneira fácil é carregar o bootstrap.js após o jquery-ui.js, para que o bootstrap .tooltip substitua as UIs do jquery. Se você estiver usando um carregador de módulo como requirejs, poderá tornar o bootstrap dependente do jquery-ui, como tal:

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