par anonyme 27-Octobre-2022

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

1 Réponse

par Antoine 27-Octobre-2022

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>

Questions liées

Bienvenue sur 1FORMATIK, où vous pouvez poser des questions en lien avec l'informatique et internet, et recevoir des réponses de l'équipe et d'autres internautes.

2.6k questions

3k réponses

...