jQueryUI les info-bulles sont en concurrence avec Twitter Bootstrap

J'ai été en mesure d'obtenir quelques outils et conseils pour travailler enfin avec le code suivant:

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

et puis

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

Le problème, je suis en cours d'exécution, c'est qu'il est à l'aide de jQueryUI les info-bulles (pas de flèches, gros laid info-bulles) au lieu de s'Amorce.

Que dois-je faire pour utiliser le Bootstrap des info-bulles au lieu de jQueryUI?

avez-vous besoin d'avoir les deux choses?
Nan... j'aimerais juste avoir le Bootstrap des info-bulles.
désolé, je voulais dire avez-vous besoin d'avoir l'interface utilisateur de jquery ET bootstrap?
Oui... il semble que l'Bootstrap.js trucs repose (au moins en partie) sur le jQueryUI choses. Sans jQuery, Bootstrap choses ne fonctionnent pas.
Cela a fonctionné pour moi, caisse answer
incorrect. Bootstrap nécessite le noyau de la bibliothèque de JQuery, pas JQuery.L'INTERFACE utilisateur.

InformationsquelleAutor markdotnet | 2012-12-05

jquery-ui twitter-bootstrap

176

À la fois l'INTERFACE utilisateur de jQuery et Bootstrap utilisation tooltip pour le nom du plugin. Utilisation $.widget.bridge pour créer un nom différent pour la version de jQuery UI et de permettre le démarrage du plugin pour rester nommé info-bulle (en essayant d'utiliser le noConflict option sur le Bootstrap widget résultat juste, dans un grand nombre d'erreurs car il ne fonctionne pas correctement; ce problème a été signalé ici):
```
//Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
```
De sorte que le code pour le faire fonctionner:
```
//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>
```
Beau copier coller du code qui gère également le bouton de conflit:
```
<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>
```
- Je reçois un js message d'erreur quand j'essaie ça. 'undefined' is not an object (evaluating '$.widget.bridge')
- covar - avez-vous vous assurer que vous avez tous les src scripts importés? Et êtes-vous d'utiliser les versions les plus récentes de la libs?
- merci de votre réponse avec le widget.pont m'a beaucoup aidé
- Il est important que vous devez d'abord importer jquery-ui, puis de faire bridge chose, et puis les importer bootstrap.
- merci très bon
- une solution qui est une douleur si vous avez tout empaqueté et compacte.. il n'y a pas moyen de mettre ce script dans l'intervalle d'une certaine manière.. zut, les collisions de nom de déchets.
- Usage: $('#element').uitooltip()
- si vous utilisez webpack faisceaux avec minifiés de code que vous pouvez simplement mettre jquery-ui avant bootstrap.js
- Cela peut sembler redondant, mais j'ai pensé que je le mentionne pour aider intermédiaire ASP.Net MVC, les gens qui ont ce problème. Cette solution a très bien fonctionné pour moi. Voici les changements que j'avais à faire à ma Disposition.cshtml page: ` @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") <script> /*** Gérer le plugin jQuery nom conflit entre l'INTERFACE utilisateur de jQuery et Bootstrap ***/ $.widget de.pont('uibutton', $.l'interface utilisateur.le bouton); $.widget de.pont('uitooltip', $.l'interface utilisateur.info-bulle); </script> @Scripts.Render("~/bundles/bootstrap") `
InformationsquelleAutor The Demz
65

Une solution simple est de charger bootrap.js après jquery-ui.js, de sorte que le bootstrap .bulle d'aide de la méthode l'emporte.
- Cela a fonctionné pour moi et c'est le moyen le plus facile. Je recommande l'ajout d'un commentaire HTML indiquant qu'une bibliothèque doit être chargé après les autres.
- Ne fonctionne pas pour moi malheureusement.
- Parfait a fonctionné pour moi merci bro 🙂
- Il fonctionne, mais maintenant j'ai une console d'avertissement.
- Un jour vous allez être absent près de l'icône dans les boîtes de dialogue en utilisant une telle approche. stackoverflow.com/questions/17367736/...
- Ce devrait être voté plus élevé.
- Cette solution ne fonctionne pas pour moi. À l'aide de Chrome, je le ferais "vider le cache et de rafraîchissement de la page et de l'info-bulle travaille parfois et parfois pas (pas d'erreur dans la console.le journal). Rafraîchissant de 30 fois le produit du rendement de travail 7 fois. Ensuite, je suis allé et téléchargé une personnalisation de l'INTERFACE utilisateur de jQuery paquet et maintenant quand je "vider le cache et de rafraîchissement de 30 fois, je reçois de travail les résultats de 30 fois avec 0 erreurs. Je voudrais aussi ajouter que je suis en utilisant require.js donc je peux facilement contrôler l'ordre dans lequel les bibliothèques sont chargées.
- Je VOUS AIME pour cela, le plus simple logique fix
InformationsquelleAutor Stefan Musarra
25

Cela a fonctionné pour moi:

Si vous avez besoin d'utiliser JQuery-UI, mais vous voulez utiliser bootstrap de l'info-bulle, il suffit d'obtenir une version personnalisée de JQuery-UI à partir de ce site web.

Simplement de décocher la case "info-bulle" de l'option, et le télécharger (il sera quelque chose comme "jquery-ui-1.10.4.custom.js").

Il suffit de l'ajouter à votre projet au lieu de la version que vous utilisez actuellement maintenant, et vous êtes prêt à faire la fête. Cela permettra d'éviter le conflit. Il a travaillé comme un charme pour moi!
- Si vous avez encore de télécharger les fichiers de ressources de chaque côté par la main au lieu d'utiliser un outil comme bower? Comment voulez-vous installer des bibliothèques tierces en général? Recherche dans google pour le télécharger et à partir de n'importe quel site?
- que diriez-je ne veux pas utiliser bootstrap info-bulle, mais l'INTERFACE utilisateur à la place.. ils ceux qui sont à l'origine du problème de toute façon.
- Simple, facile, a très bien fonctionné pour ma situation. Merci!!!! +1
- A fonctionné pour moi - ont été vraiment à se taper la tête là - dessus- plus merci
- La plupart de réponse raisonnable, tant qu'il suggère de prendre seulement la fonctionnalité requise. Merci
- Signifie simplement que vous ne pouvez pas utiliser un CDN malheureusement
InformationsquelleAutor Poncho
18

Dans le cas où vous devez charger jquery-ui.js après bootstrap.js voici comment le faire:

HTML:
```
<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>
```
Cela va remplacer jquery-ui bulle d'aide et de toujours utiliser des amorces.
- dans votre solution d'interface utilisateur info-bulle s'être écrasé avec bootstrap, mais si tout le corps ne souhaitez pas remplacer les avoir à utiliser la solution précédente
- Un jour vous allez être absent près de l'icône dans les boîtes de dialogue en utilisant une telle approche. stackoverflow.com/questions/17367736/...
- excellente solution!
InformationsquelleAutor supersan
13

En supposant que l'INTERFACE utilisateur sera appelé après bootsrap initialisé

Stocker les fichiers d'amorce de la fonction juste à l'avant de l'INTERFACE utilisateur est initialisé
```
jQuery.fn.bstooltip = jQuery.fn.tooltip; 
```
Puis l'appeler comme suit
```
$('.targetClass').bstooltip();
```
InformationsquelleAutor Projesh Pal

Cette solution semble bien fonctionner pour moi.

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

InformationsquelleAutor Jon Stevens

6

Que diriez-vous simplement à l'aide de Bootstrap popovers à la place? BS popovers ne pas créer le même conflit, bien qu'ils nécessitent le même tooltip.js composante. Oui, ils sont plus stylisé, mais ne cause pas de mon JQuery UI les boutons pour aller bancale.

Je suis en utilisant Jquery UI uniquement pour coutume de saisie semi-automatique/zones de liste modifiables (ne peut donc pas revendiquer d'autres JQ-contrôles de l'INTERFACE utilisateur sont ok) et rien de ce qui précède travaillé pour résoudre la question CSS sur la zone de liste déroulante boutons de devenir "non stylé" lors de l'invocation de BS info-bulles. Commutation de BS, Popovers fourni essentiellement le même effet avec pas de conflits, pas de réorganisation de mon script importations, et non explicite pont instructions nécessaires.
- Comme cela, très pragmatique
- Merci pour l'astuce, je suis d'accord, c'est une solution qui évite toute la complexité.
- Ja l'homme, dis on résout tous les cauchemars et est à la recherche shweet comme un citron!
- Ne pas popovers besoin d'info-bulle comme pré-requis?
InformationsquelleAutor AgonyOfVictory
4

Il est facile et la bonne solution, il suffit de réorganiser votre bootstrap et jquery ui lien de fichier comme ceci:
```
 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>
```
Il suffit de charger jQueryui avant le chargement de bootstrap fichier js. C'est un travail pour moi.
- Un jour vous allez être absent près de l'icône dans les boîtes de dialogue en utilisant une telle approche. stackoverflow.com/questions/17367736/...
- il se substitue à toutes les propriétés communes de l'interface utilisateur avec bootstrap min et ne peut pas utiliser les deux si nécessaire
InformationsquelleAutor Sanjib Debnath
3

essayez d'utiliser jQuery.noConflict() et voir si cela vous aide à tous. Il ressemble bootstrap et jQuery sont en utilisant le même espace de noms, et peut-être le bootstrap et jQuery tooltips sont chargées dans la même fonction, ou l'un est chargé en premier.

Vous pouvez également vérifier pour voir qui de la bibliothèque est chargé en premier. Habituellement, si vous déclarez la même fonction deux fois en javascript le second est celui qui est utilisé.

Troisièmement, vérifiez les jQueryUI paquet (sur leur site) et voir si vous pouvez télécharger une version qui n'ont pas les info-bulles inclus (j'ai vérifié et c'est tout à fait faisable).
- Donc, c'est bizarre... je suis le chargement de bibliothèques javascript dans le même ordre, mais quand j'ai eu le problème, j'ai été chargement de jquery-ui bibliothèque avant de mon <body> tag et le bootstrap.js après tout mon contenu. J'ai déplacé le bootstrap.js au-dessus de mon contenu (mais toujours après le jquery-ui.js) et maintenant c'est rendu les info-bulles comme je m'attends. J'espère que ce n'est pas gâcher l'univers de mon site web. Je pensais que c'était la meilleure pratique pour charger le javascript, il pourrait, après le contenu pour des raisons de performances... bizarre.
- il est de bonne pratique. Peut-être que le bootstrap a besoin d'être au top?
- Bootstrap JS certainement n'a pas besoin d'être en haut de la page.
InformationsquelleAutor Matt
1

Un moyen facile est de charger bootstrap.js après jquery-ui.js, de sorte que le bootstrap .info-bulle des remplacements de jquery UI. Si vous utilisez un chargeur de module comme requirejs, alors vous pourriez faire de bootstrap dépend de jquery-ui, en tant que tel:
```
requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...
```
- Ce un a résolu mon problème. Merci!
InformationsquelleAutor Andrew

Vous devez vous connecter pour publier un commentaire.