web-dev-qa-db-fra.com

L'info-bulle d'amorçage ne montre pas le style de l'info-bulle, mais uniquement les données

Essayer de faire montrer à Bootstrap la fonction info-bulle, j’ai suivi exactement comme Bootstrap DOC à propos de Info-bulles et déclarer mon attribut et mes propriétés. Lorsque je survole le texte, les données Some tooltip text! s'affichent car il n'y a que la fonction alt="", mais pas avec le style Bootstrap mentionné dans leur document.

Mesures que j'ai prises pour résoudre ce problème:

  1. Inclut tooltip.js depuis l’extérieur CDN
  2. activer l'infobulle jeter <Script>$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});</script>
  3. Ajouter API Google de jQuery (je sais que ce n'est pas nécessaire)
  4. vérifie si la page charge le CDN Bootstrap et les externes (All Do!)

Balise HTML d'en-tête

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Balise HTML

<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

Voici une image de la façon dont cela se voit.

enter image description here

javascriptjqueryhtmltwitter-bootstrap
12
Farhad

Voici un modèle de travail pour vous. Mes suppositions sur ce qui n'allait pas:

  1. jQuery doit toujours venir avant bootstrap.js.
  2. Si vous n'avez pas de serveur local en cours d'exécution, vous devez ajouter http: aux adresses CDN.
  3. Vous avez peut-être essayé d'initialiser l'info-bulle dans les balises head. Le problème est que le document n'était probablement pas prêt.

Ce qui suit fonctionne bien. 

HTML: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>
    $( document ).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
    });
    </script>
  </body>
</html>
14
jme11

Rappelez-vous également que Bootstrap Tooltip n'aime pas jQuery UI (il existe quelques conflits de noms et «tooltip» en est un).

La solution change l’ordre de chargement du script: jQuery UI en premier, bootstrap.js après.

22
1_bug

Votre problème est plus que probable que vous n'ayez pas initialisé l'info-bulle correctement. Jetez un oeil à ceci bootply

Les documents état:

enter image description here

HTML:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Jquery:

$("[data-toggle=tooltip").tooltip();
  1. N'oubliez pas que vous n'avez besoin que de bootstrap.min.css et bootstrap.js pour que l'info-bulle fonctionne correctement. 
  2. N'oubliez pas de charger les scripts et les feuilles de style à l'aide d'URL absolues (ajoutez / devant le chemin).
  3. bootstrap dépend de jquery, chargez jquery en premier.
7
Jordan.J.D

Essayez d'ajouter ce code au bas de votre code HTML. J'en ai besoin pour que l'info-bulle fonctionne. Ajoutez class = "ttop" à vos info-bulles en code HTML.

$(document).ready(function(){
$(".ttop").tooltip({
    placement : 'top'
});
});
1
DivineChef

Dans mon cas, en utilisant AngularJS, même tous les scripts css/js ont été séquencés/invoqués correctement mais ne sont toujours pas affichés. 

Le problème était qu'il se trouvait sous une balise avec l'attribut "ng-if". Après que je l'ai placé à l'extérieur de cette balise, cela fonctionne bien.

Peut-être y at-il un léger retard avec AngularJS qui rend les éléments avec "ng-if" pendant que jquery initialise l'info-bulle.

1
babidi

Vous devez initialiser l'info-bulle comme ceci:

$('[data-toggle="tooltip"]').tooltip()
0
Four

Si vous utilisez popper.js avec bootstrap 4, au lieu d'utiliser:

<script src="~/Scripts/popper.min.js"></script>

utilisez le fichier .js dans le répertoire UMD: 

<script src="~/Scripts/umd/popper.min.js"></script>
0
Exel Gamboa

Tous vos fichiers jquery * .js doivent précéder bootstrap.js.

jquery-{version}.js
jquery-confirm.min.js
jquery-ui-{version}.js
jquery.validate*
etc...
bootstrap.js

Alors utilisez:

<script>
$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
0
BSchu