Infobulle CSS3 Tooltips CSS3

 

Avec le CSS3, nous pouvons faire de belle chose, et notamment en ce qui concerne les infos bulles.
Ce que je vous propose ici, c'est le type d'info bulle que j'utilise sur mes liens, afin de remplacer le contexte de la balise (title).
J'ai testé beaucoup de script d'info bulle en (css et javascript), mais charger un code css et un fichier javascript assez conséquent, cela me paraissait assez lourd. Tandis que la, il n'y a que du CSS, et comme la feuille de style est appellée partout sur toutes les pages, cela pose pas de problème, à savoir si j'ai mis ou pas le fichier js qui va avec, ce qui enleve le doute. De plus le code CSS est configurable au niveau des couleurs.

Ci-dessous le code html très simple à mettre en place afin d'avoir une flèche partant du lien sur lequel on survole, et d'avoir le texte dans un joli cadre..

                      <h3>Tooltips CSS3 - v1</h3>
                        <p><a class="tooltip" href="#">Contact<span><b></b><strong>Si vous souhaitez des informations, contacter moi</strong></span></a></p>
                      <h3>Tooltips CSS3 - v2</h3>
                        <p><a class="tooltip2" href="#">Contact<span><b></b><strong>Si vous souhaitez des informations, contacter moi</strong></span></a></p>
                      

Ci-dessous le code css représentatif au code html.

                      /*version 1*/
                      a.tooltip {outline:none;text-decoration:none;} a.tooltip strong {line-height:30px;} a.tooltip > span { width:200px; padding: 10px 20px; margin-top: 20px; margin-left: -85px; opacity: 0; visibility: hidden; z-index: 10; position: absolute; font-family: Arial; font-size: 12px; font-style: normal; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 2px 2px 2px #999; -moz-box-shadow: 2px 2px 2px #999; box-shadow: 2px 2px 2px #999; -webkit-transition-property:opacity, margin-top, visibility, margin-left; -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -moz-transition-property:opacity, margin-top, visibility, margin-left; -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -o-transition-property:opacity, margin-top, visibility, margin-left; -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; transition-property:opacity, margin-top, visibility, margin-left; transition-duration:0.4s, 0.3s, 0.4s, 0.3s; transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; } /*a.tooltip > span:hover,*/ a.tooltip:hover > span { opacity: 1; text-decoration:none; visibility: visible; overflow: visible; margin-top:50px; display: inline; margin-left: -60px; } a.tooltip span b { width: 15px; height: 15px; margin-left: 20px; margin-top: -19px; display: block; position: absolute; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: inset -1px 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; display: none\0/; *display: none; } a.tooltip > span { color: #000000; background: #FBF5E6; background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBF5E6', endColorstr='#FFFFFF',GradientType=0 ); border: 1px solid #CFB57C; } a.tooltip span b { background: #FBF5E6; border-top: 1px solid #CFB57C; border-right: 1px solid #CFB57C; } 
                      /*version 2*/
                      a.tooltip2 {outline:none;text-decoration:none;} a.tooltip2 strong {line-height:30px;} a.tooltip2 > span { width:200px; padding: 10px 20px; margin-top: 20px; margin-left: -85px; opacity: 0; visibility: hidden; z-index: 10; position: absolute; font-family: Arial; font-size: 12px; font-style: normal; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 2px 2px 2px #999; -moz-box-shadow: 2px 2px 2px #999; box-shadow: 2px 2px 2px #999; -webkit-transition-property:opacity, margin-top, visibility, margin-left; -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -moz-transition-property:opacity, margin-top, visibility, margin-left; -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -o-transition-property:opacity, margin-top, visibility, margin-left; -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; transition-property:opacity, margin-top, visibility, margin-left; transition-duration:0.4s, 0.3s, 0.4s, 0.3s; transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; } a.tooltip2:hover > span { opacity: 1; text-decoration:none; visibility: visible; overflow: visible; margin-top:50px; display: inline; margin-left: -60px; } a.tooltip2 span b { width: 15px; height: 15px; margin-left: 20px; margin-top: -19px; display: block; position: absolute; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: inset -1px 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; display: none\0/; *display: none; } a.tooltip2 > span { color: #FFFFFF; background: #333333; background: -moz-linear-gradient(top, #333333 0%, #999999 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#999999)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 ); border: 1px solid #000000; } a.tooltip2 span b { background: #333333; border-top: 1px solid #000000; border-right: 1px solid #000000; } 
                      

Dans la démo vous trouverez les deux versions décrites ici, plus d'autres, si vous souhaitez récupérer le code des autres info bulles, regarder le code source de la page de démo.



La démo utilise les mêmes codes que ceux cités dans les onglets de code.



Ci-dessous le lien vers la démo. Démo