J'ai une info-botte de bootstrap 4 qui fonctionne bien, mais quand je verse sur la boîte noire de l'info-bulle, cela ne devrait pas cacher, comment puis-je faire cela?
My Code: 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">
<p class="float-right mb-0" data-toggle="tooltip" data-html="true" title="
<ul class='trading-rules-tooltip-box'>
<li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
<li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
<li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
<li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
</ul>
<a href='#' class='float-left'>View More</a>
"> Trading Rules</p>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>3 Réponses :
L'info-bulle fonctionne comme prévu. Cela fonctionne de la même manière que l'exemple de bootstrap 4. Si vous souhaitez que le contenu de l'info-bulle est visible, envisagez-vous de modifier la balise code> sur 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">
<button class="float-right mb-0" data-toggle="tooltip" data-html="true" title="
<ul class='trading-rules-tooltip-box'>
<li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
<li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
<li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
<li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
</ul>
<a href='#' class='float-left'>View More</a>
"> Trading Rules</button>
</div>
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
J'ai juste besoin de cliquer sur Afficher plus de boutons non sur les règles de trading et à d'autres listes UL, etc.
Vous pouvez ajouter du délai pour masquer le contenu de l'info-bulle. Mais, le contenu de l'info-bulle ne fermera que le délai que vous avez défini.
Ceci est une exexclusion de base de l'info-bulle. Vous pouvez utiliser Popover pour obtenir la même fonctionnalité. Veuillez vérifier ci-dessous l'URL pour plus de détails https://getbootstrap.com/docs/4.0/commonents/popovers/ << / p>
Vous pouvez utiliser une barre NAVE BOOTSTRAP pour obtenir la même fonctionnalité. Si vous souhaitez utiliser NAVBAR, veuillez vous rendre à ce lien. BOOTSTRAP NAVBAR Dropdown sur Hover
Les info-bulles ne sont pas conçues pour cela, essayez d'utiliser des collovrés.
Les porcovers seraient la bonne façon, mais si vous souhaitez toujours utiliser une info-bulle, vous pouvez utiliser les propriétés de la gâchette de l'info-bulle.