Tooltips avec Twitter Bootstrap

Question

Tooltips avec Twitter Bootstrap

Demandé el 3 de Mai, 2012: Quand la question a-t-elle été
88623 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

Je suis un peu confus en ce qui concerne les infobulles. Elles sont couverts dans la documentation mais Twitter suppose une certaine connaissance. Par exemple, ils disent de déclencher l'infobulle avec le code JavaScript suivant.

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

Après avoir fouillé dans leur source, j'ai réalisé que les champs avec des infobulles doivent être dans une classe et que le code suivant doit être exécuté.

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

Mais je me demande maintenant pourquoi Twitter Bootstrap ne fournit pas une telle classe. tooltip ? Juste pour permettre une plus grande configuration ? Est-il préférable d'ajouter les éléments individuels avec des infobulles à la rubrique tooltipclass ou dois-je ajouter la zone environnante à tooltipclass ? L'utilisation d'un identifiant de classe ( .class ) au lieu d'un identifiant de nom ( #name ) ?

Demandé el 3 de Mai, 2012 par schmmd

Answer 1

5 Réponses

Answer 2

107voto

Andres Ilich Points 41712

Je pense que votre question se résume à savoir quel sélecteur utiliser pour configurer vos infobulles, et la réponse à cette question est presque ce que vous voulez. Si vous voulez utiliser une classe pour déclencher vos infobulles, vous pouvez le faire, prenez l'exemple suivant :

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

Vous pouvez ensuite déclencher tous les liens à l'aide de la fonction .link en tant qu'infobulles, comme suit :

$('.link').tooltip()

Maintenant, pour répondre à votre question de savoir pourquoi les développeurs de bootstrap n'ont pas utilisé une classe pour déclencher les infobulles, c'est parce que ce n'est pas nécessaire exactement, vous pouvez pratiquement utiliser tous les sélecteurs que vous voulez pour cibler vos infobulles, tels que (mon favori personnel) la classe rel attribut. Avec cet attribut, vous pouvez cibler tous les liens ou éléments avec l'attribut rel est définie comme étant la propriété tooltip comme suit :

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

Et vos liens ressembleront à quelque chose comme ceci :

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

Bien entendu, vous pouvez également utiliser une classe ou un identifiant de conteneur pour cibler vos infobulles dans un conteneur spécifique que vous souhaitez isoler avec une option spécifique ou séparer du reste de votre contenu et vous pouvez l'utiliser de cette manière :

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

Ce sélecteur ciblera toutes vos infobulles avec la balise rel à l'intérieur de votre #example de cette façon, vous pouvez ajouter des styles spéciaux ou des options à cette section uniquement. En résumé, vous pouvez utiliser n'importe quel sélecteur valide pour cibler vos infobulles et il n'est pas nécessaire de salir votre balisage avec une classe supplémentaire pour les cibler.

Répondu el 3 de Mai, 2012 par Andres Ilich (41712 Points )

Answer 3

14voto

Dr.Bronx Points 106

La façon la plus simple de l'utiliser est la suivante

mettre ceci dans l'en-tête :

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

et ensuite

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

Donc avec ce code js, si vous avez une balise n'importe où dans votre page avec rel="tooltip" obtenir l'infobulle de l'amorce.

Bonne chance.

Répondu el 27 de Décembre, 2012 par Dr.Bronx (106 Points )

Answer 4

5voto

softnayr Points 64

Ajoutez ceci dans votre en-tête

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

Il suffit ensuite d'ajouter l'attribut title="your tooltip" à tout élément

Répondu el 6 de Août, 2013 par softnayr (64 Points )

Answer 5

3voto

Baig Points 632

J'ai inclus le fichier JS et CSS et je me demandais pourquoi cela ne fonctionnait pas. Ce qui l'a fait fonctionner, c'est lorsque j'ai ajouté ce qui suit dans <head> :

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

Répondu el 29 de Décembre, 2012 par Baig (632 Points )

Answer 6

3voto

Amged Points 4

Il suffit de cocher tous les onglets de données...

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

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

Répondu el 18 de Juillet, 2014 par Amged (4 Points )

Tooltips avec Twitter Bootstrap

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Tooltips avec Twitter Bootstrap

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: