Comment changer la couleur d'un Tooltip Bootstrap 5 ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-10-27 15:33:01
Thèmes : bootstrap-5 - tooltip - couleur
Question

Comment faire pour changer la couleur de fond et de la flèche d'un Tooltip Bootstrap 5 ?

Réponse

Pour changer la couleur de fond et de la flèche d'un Tooltip Bootstrap 5, vous devez ajouter deux règles CCS.

Dans l'exemple ci-dessous on applique la couleur orange à un Tooltip positionné sous l'élément HTML.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment changer la couleur d'un tooltip BootStrap ?</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>    
.tooltip-inner {
 background-color: orange;
 box-shadow: 0px 0px 4px orange;
 opacity: 1 !important;
}
.tooltip.bs-tooltip-auto .tooltip-arrow::before {
 border-bottom-color: orange !important;
}
</style>
</head>
<body>
<span data-bs-toggle="tooltip" data-bs-placement="bottom" title="Exemple pour changer la couleur d'un tooltip BootStrap 5">Exemple</span>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
  $('[data-bs-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>