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

141

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?

markdotnet
fonte
você precisa ter as duas coisas?
Matt
Não ... eu gostaria de ter as dicas de ferramentas do Bootstrap.
markdotnet
desculpe, eu quis dizer que você precisa ter jquery ui e bootstrap?
Matt
1
Isso funcionou para mim, check-out esta resposta
Poncho
1
@markdotnet: incorreto. O Bootstrap requer a biblioteca JQuery principal, não o JQuery.UI.
22815 Ian Kemp

Respostas:

191

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>
The Demz
fonte
1
Eu recebo um erro js quando tento isso. 'undefined' is not an object (evaluating '$.widget.bridge')
Covard
2
covar - você se certificou de que todos os scripts src foram importados? E você está usando as versões mais recentes das bibliotecas?
The Demz
1
@ Covard: É importante que você primeiro importe o jquery-ui, faça a bridgecoisa e depois importe o bootstrap.
Joshua Muheim
2
uma solução que é uma dor se você tiver tudo empacotado e compactado .. não há como colocar esse script de alguma forma .. caramba, lixo de colisão de nome.
Piotr Kula
2
se você estiver usando feixes Webpack com código de minified você pode simplesmente colocar jquery-ui antes bootstrap.js
Raj
69

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

Stefan Musarra
fonte
2
Isso funcionou para mim e é a maneira mais fácil. Eu recomendo adicionar um comentário HTML informando que uma biblioteca deve ser carregada após a outra.
Paul
1
Um dia você estará perdendo o ícone de fechamento nas caixas de diálogo usando essa abordagem. stackoverflow.com/questions/17367736/…
Oleksii Kyslytsyn
Esta solução não funcionou para mim. No Chrome, eu "limpava o cache e atualizava bastante" a página e a dica de ferramenta algumas vezes funcionava e outras não (nenhum erro no console.log). Atualizar 30 vezes produziu resultados de trabalho 7 vezes. Fiz o download de um pacote personalizado da interface do usuário do jQuery e agora, quando "limpo o cache e a atualização", 30 vezes, recebo resultados de trabalho 30 vezes com 0 erros. Eu também acrescentaria que estou usando o require.js para poder controlar facilmente a ordem em que as bibliotecas são carregadas.
HPWD 18/04/19
Eu te amo para essa correção lógica mais simples
Milind
30

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!

Poncho
fonte
1
Então você ainda baixa os arquivos de ativos de cada lado por mão, em vez de usar uma ferramenta como o pavilhão? Como você instala bibliotecas de terceiros em geral? Pesquise no google e faça o download em qualquer site?
user3746259
que tal eu não quero usar a dica de ferramenta de inicialização, mas a interface do usuário em vez disso .. eles são os que causam o problema de qualquer maneira.
Piotr Kula
2
Simples, fácil, funcionou muito bem para a minha situação. Obrigado! 1
Chris Kempen
Trabalhou para mim - ter sido realmente bater minha cabeça sobre isso - mais um - obrigado
GCHQ
A resposta mais razoável, desde que sugira apenas a funcionalidade necessária. Graças
Oleksii Kyslytsyn
30

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.

supersan
fonte
1
em sua solução ui dica será substituído inicialização mas se qualquer corpo não deseja substituir tem que usar a solução anterior
Projesh Pal
Um dia você estará perdendo o ícone de fechamento nas caixas de diálogo usando essa abordagem. stackoverflow.com/questions/17367736/…
Oleksii Kyslytsyn
ótima solução!
Ivan Ferrer
18

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();
Projesh Pal
fonte
$.fn.bstooltip = $.fn.tooltip.noConflict();
Maneira
9

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);
Jon Stevens
fonte
9

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.

AgonyOfVictory
fonte
3
Assim, muito pragmática
Mark Stratmann
Obrigado pela dica, eu concordo, é uma solução alternativa que evita toda a complexidade.
Tom
Sim, cara, esse alguém resolve todos os pesadelos e está parecendo uma merda de limão!
Piotr Kula
Os popovers não exigem dica de ferramenta como pré-requisito?
MrKobayashi
3

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

Matt
fonte
Portanto, isso é estranho ... Estou carregando as bibliotecas javascript na mesma ordem, mas quando estava com o problema, estava carregando a biblioteca jquery-ui antes da minha tag <body> e do bootstrap.js depois de todo o meu conteúdo. Movi o bootstrap.js acima do meu conteúdo (mas ainda depois do jquery-ui.js) e agora está renderizando as dicas de ferramentas como eu esperaria. Espero que isso não atrapalhe o universo do meu site. Eu pensei que era uma prática recomendada carregar o javascript possível após o conteúdo por motivos de desempenho ... estranho.
MarkDotnet
é uma prática recomendada. Talvez o bootstrap precise estar no topo?
Matt
O JS do Bootstrap definitivamente não precisa estar no topo da página.
Paul Phillips
3

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.

Sanjib Debnath
fonte
1
Um dia você estará perdendo o ícone de fechamento nas caixas de diálogo usando essa abordagem. stackoverflow.com/questions/17367736/…
Oleksii Kyslytsyn
ele vai substitui todas as propriedades comuns de UI, com inicialização min e não pode usar ambos, se necessário
Projesh Pal
1

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' ]
        },...
Andrew
fonte