rss

Un tooltip rapide stp..

Holla,

 voici un petit bout de code Html et Css permettant d'afficher un Tooltip

sources : post d'inspiration initiale + les lumières de Ludo & surtout Thomas ^^ ...

code html :

<div class="showtooltipA">Hover over me!
    <div class="tooltipA">this is my <href="http://google.fr">wunderfull</atip displayed on hover only :)</div>
</div>


code css :

.showtooltipA {
  positionrelative;
}

.showtooltipA .tooltipA {
    displaynone;
    positionabsolute;
    top:20px;
    left40px;
    border1px solid grey;
    background-colorlightyellow;
    padding:10px;
    font-size1em;

}

.showtooltipA:hover .tooltipA,
.showtooltipA:focus .tooltipA {
    displayblock;
}

 testez en live ici : http://jsfiddle.net/Vqmaw/2915/
  version plus avancée : http://jsfiddle.net/Vqmaw/2920/

avantages :
  • rapide à implémenter
  • pas de dépendances requises
  • pas de modification de la position des éléments encadrant le tooltip
inconvénients :
  • très (trop?) simpliste 
Autres exemples :

Aucun commentaire:

Enregistrer un commentaire

Mots clés du blog

acceptancetest androï Android androïd Android7 api appender appengine application applications archive array assistantematernelle astuce auth0 authentication authority automation Axis bash bearer blog bower build bundle c calendrier camille combal cdi certificate cf client cloudfoundry collaboratif command commandes connexion console css démasquées démasquer développement dll dump easter eggs écologie écrit employeur EMUI EMUI5.0 enfant évènement export-package ExtJS fiche find firefox gadget gelf gem git gmail gooelappengine google gparted gps graylog grenoble Grid gui harddrive heroku hover howto HTML http https IE ihm immobilier imprimante innovation insolite instance integration Java JavaScript jenkins jeu jobs json json-schema-validator key keystore labs linux livre log log4j logger logs lombok masquées masquer maven maven-gae-plugin Mémoire microsoft mobile mockito mondialisation monitor MUSE musique en ligne myopera nodejs npm NT NTEventLogger onglet openstack osgi paas package parameters parent php politique prosyst prototype proxies proxy quartz radio rappel recherche regex repository resize RIA rock route ruby rubygems s8500 samsung scheduler scm sel selenium Serializer server shared shell slf4j smartphone so société song spy ssh ssl struct swagger swig tâches téléphone téléréalité test thunderbird timeout token Tomcat tooltip tooltips truststore ubuntu unit test validator virgin virtualbox wave waze web WebApp wiki wikimedia wikipédia wikipen windows yahoo youtube yum