web-dev-qa-db-fra.com

Infobulles avec Twitter Bootstrap

J'utilise Twitter Bootstrap - et je ne suis pas un développeur frontend! Cependant, cela rend le processus presque, si j'ose dire, amusant!

Je suis un peu confus au sujet des info-bulles. Ils sont couverts dans la documentation mais Twitter suppose certaines connaissances. Par exemple, ils disent de déclencher l'info-bulle avec le code JavaScript suivant.

$('#example').tooltip(options)

Après avoir fouillé dans leur source, je me suis rendu compte que les champs avec des info-bulles devaient être dans une classe et faire exécuter le code suivant.

$('.tooltipclass').tooltip(options)

Mais maintenant ma question est: pourquoi Twitter Bootstrap ne fournit-il pas une telle classe tooltip? Juste pour permettre une plus grande configuration? Est-il préférable d’ajouter les éléments individuels avec les info-bulles à tooltipclass ou devrais-je ajouter la zone environnante à tooltipclass? Est-ce important si j'utilise un identifiant de classe (.class) au lieu d'un identifiant de nom (#name)?

javascripttwitter-bootstrap
70
schmmd

Je pense que votre question se résume à quel sélecteur approprié utiliser pour configurer vos info-bulles, et la réponse à cette question est presque ce que vous voulez. Si vous souhaitez utiliser une classe pour déclencher vos info-bulles, vous pouvez le faire, par exemple, comme suit:

<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a>

Ensuite, vous pouvez déclencher tous les liens avec la classe .link attachée sous forme d’infos, comme ceci:

$('.link').tooltip()

Maintenant, pour répondre à votre question de savoir pourquoi les développeurs de bootstrap n’ont pas utilisé de classe pour déclencher les info-bulles parce qu’elle n’est pas utilisée exactement, vous pouvez utiliser pratiquement tous les sélecteurs que vous souhaitez cibler, tels que (mon favori personnel). l'attribut rel. Avec cet attribut, vous pouvez cibler tous les liens ou éléments avec la propriété rel définie sur tooltip, comme suit:

$('[rel=tooltip]').tooltip()

Et vos liens ressembleraient à quelque chose comme ça:

<a href="#" rel="tooltip" data-original-title="first tooltip">Hover me for a tooltip</a>

Bien sûr, vous pouvez également utiliser une classe de conteneur ou un id pour cibler vos info-bulles dans un conteneur spécifique que vous souhaitez isoler avec une option spécifique ou pour vous séparer du reste de votre contenu et vous pouvez l'utiliser comme suit:

$('#example').tooltip({
    selector: "a[rel=tooltip]"
})

Ce sélecteur ciblera toutes vos info-bulles avec l'attribut rel "au sein de" votre #example div. Ainsi, vous pourrez ajouter des styles spéciaux ou des options à cette section uniquement. En bref, vous pouvez utiliser n'importe quel sélecteur valide pour cibler vos info-bulles et il n’est pas nécessaire de corrompre votre balisage avec une classe supplémentaire pour les cibler.

106
Andres Ilich

Le moyen le plus simple de l'utiliser est 

mettez ceci dans l'en-tête:

<script>
    $(function ($) {
        $("a").tooltip()
    });
</script>

et alors 

<a href="#" rel="tooltip" data-placement="bottom" title="My Tooltip Text">
    My link text
</a>

donc, avec ce code js si vous avez tagué n'importe où dans votre page avec rel="tooltip", obtenez l'info-bulle d'amorçage.

bonne chance.

14
M.R.Safari

Ajoutez ceci dans votre entête

<script>
    //tooltip
    $(function() {
        var tooltips = $( "[title]" ).tooltip();
        $(document)(function() {
            tooltips.tooltip( "open" );
        });
    });
</script>

Ensuite, ajoutez simplement l'attribut title="your tooltip" à n'importe quel élément

5
softnayr

Marquez simplement toutes les bascules de données ...

jQuery(function () {
    jQuery('[data-toggle=tooltip]').tooltip();
});

http://jsfiddle.net/Amged/xUQ6D/19/

3
Amged

J'ai inclus les fichiers JS et CSS et je me demandais pourquoi il ne fonctionnait pas. Ce qui le faisait fonctionner, c’est lorsque j’ai ajouté ce qui suit dans <head>:

<script>
jQuery(function ($) {
    $("a").tooltip()
});
</script>
3
Baig

C'est parce que ces choses (je veux dire infobulle, etc.) sont des plug-ins jQuery. Et oui, ils supposent des connaissances de base sur jQuery. Je vous suggère de rechercher au moins un tutoriel de base sur jQuery.

Vous devrez toujours définir quels éléments doivent avoir une info-bulle. Et je ne comprends pas pourquoi Bootstrap devrait fournir la classe, vous définissez ces classes ou vous-même. Peut-être espériez-vous que le bootstrap faisait automatiquement de la magie? Cependant, cette magie peut également causer beaucoup de problèmes (effets secondaires indésirables).

Cette magie peut être facilement réalisée en écrivant simplement $(".myclass").tooltip(), cette ligne de code fait exactement ce que vous voulez. La seule chose à faire est d’attacher la classe myclass aux éléments qui doivent appliquer le tooltip. (Assurez-vous simplement de lancer cette ligne de code après le chargement de votre DOM. Voir ci-dessous.)

$(document).ready(function() {
    $(".myclass").tooltip();
});

EDIT: apparemment, vous ne pouvez pas utiliser la classe tooltip (probablement parce qu’elle est utilisée en interne!).

Je me demande simplement pourquoi bootstrap n'exécute pas le code que vous avez spécifié avec une classe que je peux inclure.

La chose que vous voulez produit produit presque le même code que ce que vous devez faire maintenant. La principale raison, mais ils ne l'ont pas fait, c'est parce que cela cause beaucoup de problèmes. Une personne veut l'assigner à un élément avec un identifiant; d'autres veulent l'assigner à des éléments avec un nom de classe spécifié; et encore, d'autres veulent l'assigner à un élément spécifié obtenu par un processus de sélection. Ces 3 options entraînent une complexité supplémentaire, alors qu’elles sont déjà fournies par jQuery. Je n'ai pas vu beaucoup de plugins faire ce que vous voulez (juste parce que c'est inutile; cela ne vous épargne pas le code).

2
Styxxy

Utilisation simple de ceci:

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip">
   tooltip
</a>

Utilisation de jQuery:

$(document).ready(function(){
    $('#mytooltip').tooltip();
});

Vous pouvez simplement ajouter this->data-placement="left" à gauche de l'info-bulle.

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip" data-placement="left">tooltip</a>
0
Naresh Kumar