Tooltip
Html Css Js
Animation
Directions
Composant
Snippet
No Framework
Ui Component
Css Custom
Hover
Interactive
Système de tooltips multidirectionnels HTML CSS JS pur : haut, bas, gauche, droite, styles colorés et animations fluides sans librairie externe.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippets Tooltip HTML CSS JS 2026 05111000 | AngularForAll</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
max-width: 1000px;
width: 100%;
}
h1 {
text-align: center;
color: white;
margin-bottom: 50px;
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
letter-spacing: 2px;
}
.demo-section {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.demo-section h2 {
color: #333;
margin-bottom: 30px;
text-align: center;
font-size: 1.5rem;
border-bottom: 3px solid #2a5298;
padding-bottom: 10px;
display: inline-block;
}
.button-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 30px;
}
.button-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.button-label {
font-weight: 600;
color: #555;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Boutons de base */
.btn {
position: relative;
padding: 15px 30px;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
min-width: 180px;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.btn:active {
transform: translateY(0);
}
/* Styles de boutons */
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-success {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white;
}
.btn-danger {
background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
color: white;
}
.btn-info {
background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
color: white;
}
.btn-warning {
background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
color: #333;
}
.btn-dark {
background: linear-gradient(135deg, #232526 0%, #414345 100%);
color: white;
}
.btn-purple {
background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%);
color: white;
}
.btn-pink {
background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%);
color: white;
}
/* Styles communs pour tous les tooltips */
[data-tooltip] {
position: relative;
}
[data-tooltip]::before,
[data-tooltip]::after {
position: absolute;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
pointer-events: none;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
/* Flèche du tooltip */
[data-tooltip]::before {
content: '';
border: 8px solid transparent;
z-index: 1001;
}
/* Texte du tooltip */
[data-tooltip]::after {
content: attr(data-tooltip);
background: #333;
color: white;
padding: 10px 15px;
border-radius: 6px;
font-size: 0.85rem;
white-space: nowrap;
z-index: 1000;
text-transform: none;
letter-spacing: 0;
font-weight: normal;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
/* ========== TOOLTIP TOP ========== */
.tooltip-top::before {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-top-color: #333;
margin-bottom: -8px;
}
.tooltip-top::after {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 8px;
}
/* ========== TOOLTIP BOTTOM ========== */
.tooltip-bottom::before {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-bottom-color: #333;
margin-top: -8px;
}
.tooltip-bottom::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 8px;
}
/* ========== TOOLTIP LEFT ========== */
.tooltip-left::before {
right: 100%;
top: 50%;
transform: translateY(-50%);
border-left-color: #333;
margin-right: -8px;
}
.tooltip-left::after {
right: 100%;
top: 50%;
transform: translateY(-50%);
margin-right: 8px;
}
/* ========== TOOLTIP RIGHT ========== */
.tooltip-right::before {
left: 100%;
top: 50%;
transform: translateY(-50%);
border-right-color: #333;
margin-left: -8px;
}
.tooltip-right::after {
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 8px;
}
/* ========== TOOLTIP TOP-LEFT ========== */
.tooltip-top-left::before {
bottom: 100%;
left: 20%;
border-top-color: #333;
margin-bottom: -8px;
}
.tooltip-top-left::after {
bottom: 100%;
left: 20%;
transform: translateX(-20%);
margin-bottom: 8px;
}
/* ========== TOOLTIP TOP-RIGHT ========== */
.tooltip-top-right::before {
bottom: 100%;
right: 20%;
border-top-color: #333;
margin-bottom: -8px;
}
.tooltip-top-right::after {
bottom: 100%;
right: 20%;
transform: translateX(20%);
margin-bottom: 8px;
}
/* ========== TOOLTIP BOTTOM-LEFT ========== */
.tooltip-bottom-left::before {
top: 100%;
left: 20%;
border-bottom-color: #333;
margin-top: -8px;
}
.tooltip-bottom-left::after {
top: 100%;
left: 20%;
transform: translateX(-20%);
margin-top: 8px;
}
/* ========== TOOLTIP BOTTOM-RIGHT ========== */
.tooltip-bottom-right::before {
top: 100%;
right: 20%;
border-bottom-color: #333;
margin-top: -8px;
}
.tooltip-bottom-right::after {
top: 100%;
right: 20%;
transform: translateX(20%);
margin-top: 8px;
}
/* Animation de fondu */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
[data-tooltip]:hover::after {
animation: fadeIn 0.3s ease;
}
/* Section de démonstration interactive */
.interactive-demo {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
margin-bottom: 30px;
}
.custom-tooltip-wrapper {
position: relative;
display: inline-block;
margin: 10px;
}
.custom-tooltip-btn {
padding: 12px 25px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
}
.custom-tooltip-btn:hover {
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
transform: scale(1.05);
}
/* Tooltips avancés avec couleurs */
.tooltip-success::after {
background: #11998e;
}
.tooltip-success.tooltip-top::before { border-top-color: #11998e; }
.tooltip-success.tooltip-bottom::before { border-bottom-color: #11998e; }
.tooltip-success.tooltip-left::before { border-left-color: #11998e; }
.tooltip-success.tooltip-right::before { border-right-color: #11998e; }
.tooltip-warning::after {
background: #f2994a;
color: #333;
}
.tooltip-warning.tooltip-top::before { border-top-color: #f2994a; }
.tooltip-warning.tooltip-bottom::before { border-bottom-color: #f2994a; }
.tooltip-warning.tooltip-left::before { border-left-color: #f2994a; }
.tooltip-warning.tooltip-right::before { border-right-color: #f2994a; }
.tooltip-error::after {
background: #eb3349;
}
.tooltip-error.tooltip-top::before { border-top-color: #eb3349; }
.tooltip-error.tooltip-bottom::before { border-bottom-color: #eb3349; }
.tooltip-error.tooltip-left::before { border-left-color: #eb3349; }
.tooltip-error.tooltip-right::before { border-right-color: #eb3349; }
/* Mode sombre pour certains tooltips */
.dark-section {
background: #2d2d2d;
color: white;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
}
.dark-section .btn {
box-shadow: 0 4px 6px rgba(255,255,255,0.1);
}
/* Grille pour la démo interactive */
.tooltip-grid {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
padding: 40px 0;
}
.direction-label {
position: absolute;
background: rgba(0,0,0,0.7);
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.7rem;
pointer-events: none;
}
@media (max-width: 768px) {
.button-grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 1.8rem;
}
.demo-section {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>🎯 Tooltips Multidirectionnels</h1>
<!-- Section 1 : Directions de base -->
<div class="demo-section">
<h2>📍 Directions principales</h2>
<div class="button-grid">
<div class="button-wrapper">
<span class="button-label">⬆️ Top</span>
<button class="btn btn-primary tooltip-top" data-tooltip="Tooltip en haut">
Hover me (Top)
</button>
</div>
<div class="button-wrapper">
<span class="button-label">⬇️ Bottom</span>
<button class="btn btn-success tooltip-bottom" data-tooltip="Tooltip en bas">
Hover me (Bottom)
</button>
</div>
<div class="button-wrapper">
<span class="button-label">⬅️ Left</span>
<button class="btn btn-danger tooltip-left" data-tooltip="Tooltip à gauche">
Hover me (Left)
</button>
</div>
<div class="button-wrapper">
<span class="button-label">➡️ Right</span>
<button class="btn btn-info tooltip-right" data-tooltip="Tooltip à droite">
Hover me (Right)
</button>
</div>
</div>
</div>
<!-- Section 2 : Directions diagonales -->
<div class="demo-section">
<h2>↗️ Directions diagonales</h2>
<div class="button-grid">
<div class="button-wrapper">
<span class="button-label">↖️ Top-Left</span>
<button class="btn btn-warning tooltip-top-left" data-tooltip="Tooltip en haut à gauche">
Hover me (Top-Left)
</button>
</div>
<div class="button-wrapper">
<span class="button-label">↗️ Top-Right</span>
<button class="btn btn-dark tooltip-top-right" data-tooltip="Tooltip en haut à droite">
Hover me (Top-Right)
</button>
</div>
<div class="button-wrapper">
<span class="button-label">↙️ Bottom-Left</span>
<button class="btn btn-purple tooltip-bottom-left" data-tooltip="Tooltip en bas à gauche">
Hover me (Bottom-Left)
</button>
</div>
<div class="button-wrapper">
<span class="button-label">↘️ Bottom-Right</span>
<button class="btn btn-pink tooltip-bottom-right" data-tooltip="Tooltip en bas à droite">
Hover me (Bottom-Right)
</button>
</div>
</div>
</div>
<!-- Section 3 : Tooltips avec couleurs personnalisées -->
<div class="demo-section">
<h2>🎨 Tooltips avec couleurs personnalisées</h2>
<div class="button-grid">
<div class="button-wrapper">
<span class="button-label">✅ Succès (Top)</span>
<button class="btn btn-success tooltip-top tooltip-success" data-tooltip="✅ Opération réussie !">
Succès
</button>
</div>
<div class="button-wrapper">
<span class="button-label">⚠️ Attention (Bottom)</span>
<button class="btn btn-warning tooltip-bottom tooltip-warning" data-tooltip="⚠️ Attention : action requise">
Attention
</button>
</div>
<div class="button-wrapper">
<span class="button-label">❌ Erreur (Left)</span>
<button class="btn btn-danger tooltip-left tooltip-error" data-tooltip="❌ Une erreur est survenue">
Erreur
</button>
</div>
<div class="button-wrapper">
<span class="button-label">ℹ️ Info (Right)</span>
<button class="btn btn-info tooltip-right" data-tooltip="ℹ️ Information importante">
Information
</button>
</div>
</div>
</div>
<!-- Section 4 : Démonstration interactive -->
<div class="interactive-demo">
<h2>🔄 Démonstration interactive avec JavaScript</h2>
<p style="text-align: center; color: #666; margin-bottom: 30px;">
Survolez les boutons pour voir les tooltips. Cliquez pour changer leur direction dynamiquement !
</p>
<div class="tooltip-grid" id="interactiveGrid">
<!-- Généré par JavaScript -->
</div>
<div style="text-align: center; margin-top: 20px;">
<button onclick="changeAllDirections()" class="custom-tooltip-btn" data-tooltip="Change toutes les directions" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
🔄 Changer toutes les directions
</button>
</div>
</div>
<!-- Section 5 : Mode sombre -->
<div class="demo-section dark-section">
<h2 style="color: white;">🌙 Tooltips en mode sombre</h2>
<div class="button-grid">
<div class="button-wrapper">
<span class="button-label" style="color: #aaa;">Top</span>
<button class="btn btn-primary tooltip-top" data-tooltip="Navigation principale" style="background: #667eea;">
Menu Principal
</button>
</div>
<div class="button-wrapper">
<span class="button-label" style="color: #aaa;">Bottom</span>
<button class="btn btn-success tooltip-bottom" data-tooltip="Voir les paramètres">
Paramètres
</button>
</div>
<div class="button-wrapper">
<span class="button-label" style="color: #aaa;">Left</span>
<button class="btn btn-danger tooltip-left" data-tooltip="Supprimer définitivement">
Supprimer
</button>
</div>
<div class="button-wrapper">
<span class="button-label" style="color: #aaa;">Right</span>
<button class="btn btn-info tooltip-right" data-tooltip="Plus d'informations">
En savoir plus
</button>
</div>
</div>
</div>
</div>
<script>
// Configuration des tooltips interactifs
const directions = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
const directionLabels = {
'top': '⬆️ Top',
'bottom': '⬇️ Bottom',
'left': '⬅️ Left',
'right': '➡️ Right',
'top-left': '↖️ Top-Left',
'top-right': '↗️ Top-Right',
'bottom-left': '↙️ Bottom-Left',
'bottom-right': '↘️ Bottom-Right'
};
// Générer la grille interactive
function createInteractiveGrid() {
const grid = document.getElementById('interactiveGrid');
grid.innerHTML = '';
directions.forEach((direction, index) => {
const wrapper = document.createElement('div');
wrapper.className = 'button-wrapper';
wrapper.style.position = 'relative';
const button = document.createElement('button');
button.className = `btn custom-tooltip-btn tooltip-${direction}`;
button.setAttribute('data-tooltip', `Direction: ${directionLabels[direction]}`);
button.textContent = directionLabels[direction];
button.id = `interactive-btn-${index}`;
// Ajouter un événement de clic pour changer la direction
button.addEventListener('click', function(e) {
e.preventDefault();
changeDirection(this);
});
wrapper.appendChild(button);
grid.appendChild(wrapper);
});
}
// Changer la direction d'un bouton spécifique
function changeDirection(button) {
// Retirer toutes les classes de tooltip
const allTooltipClasses = directions.map(d => `tooltip-${d}`);
button.classList.remove(...allTooltipClasses);
// Choisir une nouvelle direction aléatoire
const currentDirection = directions.find(d => button.classList.contains(`tooltip-${d}`));
let newDirection;
do {
newDirection = directions[Math.floor(Math.random() * directions.length)];
} while (newDirection === currentDirection && directions.length > 1);
// Ajouter la nouvelle classe
button.classList.add(`tooltip-${newDirection}`);
button.setAttribute('data-tooltip', `Direction: ${directionLabels[newDirection]}`);
button.textContent = directionLabels[newDirection];
// Animation de feedback
button.style.transform = 'scale(1.1)';
setTimeout(() => {
button.style.transform = 'scale(1)';
}, 200);
console.log(`Direction changée vers: ${newDirection}`);
}
// Changer toutes les directions
function changeAllDirections() {
const buttons = document.querySelectorAll('#interactiveGrid .custom-tooltip-btn');
buttons.forEach(button => {
changeDirection(button);
});
// Animation du bouton principal
const mainButton = document.querySelector('.custom-tooltip-btn[data-tooltip="Change toutes les directions"]');
if (mainButton) {
mainButton.style.transform = 'rotate(360deg)';
mainButton.style.transition = 'transform 0.6s ease';
setTimeout(() => {
mainButton.style.transform = 'rotate(0deg)';
}, 600);
}
}
// Initialiser les tooltips avec JavaScript pour plus de contrôle
function initializeTooltips() {
const tooltipElements = document.querySelectorAll('[data-tooltip]');
tooltipElements.forEach(element => {
// Ajouter des événements pour le support tactile
element.addEventListener('touchstart', function(e) {
e.preventDefault();
const tooltipText = this.getAttribute('data-tooltip');
// Créer un tooltip temporaire pour mobile
const tempTooltip = document.createElement('div');
tempTooltip.className = 'temp-tooltip';
tempTooltip.textContent = tooltipText;
tempTooltip.style.cssText = `
position: absolute;
background: #333;
color: white;
padding: 10px 15px;
border-radius: 6px;
font-size: 0.85rem;
white-space: nowrap;
z-index: 10000;
top: -40px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
pointer-events: none;
`;
this.appendChild(tempTooltip);
setTimeout(() => {
if (tempTooltip.parentNode) {
tempTooltip.parentNode.removeChild(tempTooltip);
}
}, 2000);
});
});
console.log('✅ Tooltips initialisés avec support tactile');
}
// Détection de la position et ajustement automatique
function adjustTooltipPosition(element) {
const rect = element.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Vérifier si le tooltip risque de sortir de l'écran
if (rect.top < 50) {
// Trop près du haut, forcer tooltip-bottom
element.classList.add('force-bottom');
}
if (rect.bottom > viewportHeight - 50) {
// Trop près du bas, forcer tooltip-top
element.classList.add('force-top');
}
if (rect.left < 100) {
// Trop près de la gauche, forcer tooltip-right
element.classList.add('force-right');
}
if (rect.right > viewportWidth - 100) {
// Trop près de la droite, forcer tooltip-left
element.classList.add('force-left');
}
}
// Vérifier les positions au chargement et au redimensionnement
window.addEventListener('load', () => {
createInteractiveGrid();
initializeTooltips();
const allButtons = document.querySelectorAll('[data-tooltip]');
allButtons.forEach(button => adjustTooltipPosition(button));
});
window.addEventListener('resize', () => {
const allButtons = document.querySelectorAll('[data-tooltip]');
allButtons.forEach(button => adjustTooltipPosition(button));
});
// Ajouter des styles pour les ajustements forcés
const style = document.createElement('style');
style.textContent = `
.force-bottom::before,
.force-bottom::after {
top: 100% !important;
bottom: auto !important;
}
.force-top::before,
.force-top::after {
bottom: 100% !important;
top: auto !important;
}
.force-left::before,
.force-left::after {
right: 100% !important;
left: auto !important;
}
.force-right::before,
.force-right::after {
left: 100% !important;
right: auto !important;
}
.temp-tooltip {
animation: fadeIn 0.3s ease;
}
`;
document.head.appendChild(style);
console.log('📋 Guide des tooltips :');
console.log(' - Survolez les boutons pour voir les tooltips');
console.log(' - Cliquez sur les boutons de la section interactive pour changer leur direction');
console.log(' - Support tactile inclus pour les appareils mobiles');
console.log(' - Ajustement automatique de la position selon l\'écran');
</script>
</body>
</html>Télécharger le fichier source