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

Commentaires

  • Damien
    Bonsoir EMS Tricks !

    Je suis très heureux de découvrir ce nouveau trick ce soir en me connectant à votre site.

    Je l'ai mis en oeuvre immédiatement en l'ajoutant au CSS de mon site et en personnalisant les couleurs. C'est exactement ce que je cherchais à faire. Le résultat est parfait et les info-bulles de l'agenda (lieux) et des formulaires (champs d'aide) sont enfin bien lisibles, malgré que j'utilise un jeu de couleurs en transparence pour personnaliser l'apparence principale du site.

    Un grand merci pour l'aide et le service rendu.

    Cordialement,
    Damien