Thumbnail tooltip

Changer l'apparence des infos-bulles pour sites e-monsite

Après une demande d'un utilisateur d'EMS Tricks, nous vous montrons comment changer l'apparence des infos-bulles pour les sites e-monsite.

Un trick très simple

Cette astuce nous a été demandée par Damien du site Harris73. Elle consiste à changer l'apparence des infos-bulles.

En effet, les infos-bulles prennent le style de votre couleur dominante (pour EMS Tricks c'est le jaune par exemple). Mais des fois cette couleur joue sur l'opacité et ces infos-bulles sont illisibles. Voici le petit code CSS a rajouter afin de n'affecter un style précis qu'à ces infos-bulles :

.tooltip {
    background-color: #000; /*Ici on définit la couleur de fond*/
    color: #fff; /*Ici on définit la couleur de la police*/
}
.tooltip.top:before {
    border-top-color: #000; /*Ici on définit la couleur de la flèche*/
}

EMS Framework utilise la class .tooltip, suivi de top, left, right, bottomil suffit donc juste d'ajuster le style sur cette class. Vous pouvez en savoir plus sur la class .tooltip en parcourant la documentation du framework e-monsite.

On peut bien sûr aller plus loin en arrondissant les bords, changer la taille de la police etc. Surprenez-nous ! :)

Merci à Damien pour la demande qui servira certainement à d'autres utilisateurs !

N'hésitez pas à nous envoyer vos demandes afin de les voir apparaitre sur EMS Tricks via la page demande !

css webdesign infos-bulles agenda