0
votes

Comment personnaliser BootsTrap 4 Tooltip selon les besoins?

J'ai besoin de personnaliser BootsTrap 4 info-bulle conformément au-dessous de la capture d'écran ci-dessous: -

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container p-5">
  <a href="#" data-toggle="tooltip" data-placement="top" title="<span>Minimum Trade Amount</span> <span>0.000000 BTC</span>">Trading Rules</a>
</div>

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

</body>
</html>

javascript jquery css bootstrap-4

1 commentaires

Voulez-vous changer de position? ou changer de couleur? ou ajoutez un lien? que voulez-vous exactement?

3 Réponses :

1
votes

Vous devez ajouter:

<a href="#" data-html="true" data-toggle="tooltip" data-placement="top" title="<span>Minimum Trade Amount</span> <span>0.000000 BTC</span>">Trading Rules</a>

0 commentaires

1
votes

Essayez celui-ci.

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial- scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
   </head>
    <body>

    <div class="container p-5">
      <a href="#" data-toggle="tooltip" data-html="true" data-placement="top" title="<span>Minimum Trade Amount</span>&nbsp;&nbsp;&nbsp;<span>0.000000 BTC</span><br><span>Minimum Trade Amount</span>&nbsp;&nbsp;&nbsp;<span>0.000000 BTC</span><br><span>Minimum Trade Amount</span>&nbsp;&nbsp;&nbsp; <span>0.000000 BTC</span>">Trading Rules</a>
    </div>

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

    </body>
    </html>

0 commentaires

1
votes

Pour ajouter des balises HTML dans l'info-bulle Vous devez ajouter

data-html = "vrai" code> p>

Après cela personnaliser le style comme ci-dessous: P>

p>



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container p-5">
  <a href="#" data-toggle="tooltip" data-html="true" data-placement="top" title="<span class='mr-4'>Minimum Trade Amount</span> <span>0.000000 BTC</span>"
  data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner my-tooltip"></div></div>'
  >Trading Rules</a>
</div>

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

</body>
</html>

0 commentaires