• Faire un Tooltip évolué

     

    Un tooltip ? Késaco ? Vous savez c'est cette petite fenêtre qui s'ouvre pour vous donner une information lorsque vous passez sur un élément avec la souris.

    Le tooltip est souvent utile et basique. Il est pourtant assez facile d'en réaliser un plus évolué. Mais rien de tel qu'un exemple.

    Passez votre souris sur moi

     

    Alors comment ça marche?

    Le principe:

    L'article contient une balise <div>(que j'ai appelé tooltip) qui est rendue invisible grâce à la propriété display. Cette balise a la couleur et la bordure choisie.

    Sous ce <div> , j'ai placé trois autres balises (une pour le titre, une pour le corps du texte et enfin une pour l'image).

    Lorsque l'on passe avec la souris sur l'élément choisi (onmouseover), cela appelle une fonction javascript (show_tooltip) qui:

      - Définit la taille de la balise invisible
      - Positione cette balise en haut et à droite de la souris
      - Affiche la balise

    Dès que l'on quitte l'élément avec la souris (onmouseout), une autre fonction (unshow) est appelée qui rend la balise invisible.

    Comment l'utiliser ?

    Il faut placer dans la partie HTML de votre page le script suivant:

    <script type="text/javascript">// <![CDATA[
    function show_tooltip(event,larg,haut,coul,titre,baratin)
    {
    var x=event.clientX;
    var y=event.clientY;
    document.getElementById("tooltip").style.width =larg+'px';
    document.getElementById("tooltip").style.height =haut+'px'
    document.getElementById("tooltip").style.backgroundColor = coul;
    if (titre !='') {document.getElementById("titretooltip").innerHTML=titre}
    if (baratin !='') {document.getElementById("corpstooltip").innerHTML=baratin}
    document.getElementById("tooltip").style.left =(x+10)+'px';
    document.getElementById("tooltip").style.top =(y-haut -10)+'px';
    document.getElementById("tooltip").style.display ='block';
    }
    function unshow()
    {
    document.getElementById("tooltip").style.display ='none';
    }
    // ]]></script>

     

    Puis il faut définir la <div> qui va vous servir de tooltip. Celle ci-dessous correspond au tooltip de cette page:

    <div id="tooltip" style="display: none; padding: 5px; border: 1px solid Black; border-radius: 10px; position: fixed; float: none; width: 60px; ">
    <h3 id="titretooltip">pp</h3>
    <p id="corpstooltip" style="float: left; width: 150px;">pp</p>
    <p style="float: right;"><img src="http://ekladata.com/Q97lTr67ftDn0mdAOp2Hw7sNIEI/227407.jpg" alt="" width="50" height="50" /></p>
    </div>

     

    Maintenant il ne reste plus qu'à l'appeler quand vous en avez besoin. Dans l'exemple ci-dessous, 250 est la largeur de la div et 120 sa hauteur .

    <a onmouseover="show_tooltip(event,250,120,'LightBlue','Super tooltip','Vous ne trouvez pas ? On peut y placer quasiment tout, texte, images etc.')" onmouseout="unshow()">Passez votre souris sur moi</a>



     

     

    Faire un Tooltip évolué

    « Générateur de CSSTuto: Une Boite déroulante en CSS3 + Javascript »

    Tags Tags : , , , ,
  • Commentaires

    33
    Mercredi 10 Février 2016 à 18:03

    Super tuto ! Merci !

    32
    Samedi 24 Mai 2014 à 16:36

    Bonjour et bravo pour ton travail.

    Je viens souvent te voir (discrètement) mais je viens d'essayer ce code tooltip et je me suis bien amusé ... merci.

    Gilbert

    31
    Kip
    Mercredi 25 Septembre 2013 à 21:26

    Bjr

    je me lancerais bien mais je ne comprends pas tout... Je voudrais qu'une petite fenêtre d'info apparaisse au survol du nom d'une rubrique, dans mon menu, avec la souris. Ex : la rubrique "Archives".
    Pour l'instant, j'ai mis un article en top de page mais ça ne me satisfait pas. D'où mes questions :

    1- Il faut placer dans la partie HTML de votre page le script suivant:  De quelle page est-il question pour placer le code ? Et où exactement ? Les liens, dans le menu des rubriques, ne sont pas des articles...

    2- Puis il faut définir la <div> qui va vous servir de tooltip. Celle ci-dessous correspond au tooltip de cette page:  Où dois-je mettre ce code ?

    3- Maintenant il ne reste plus qu'à l'appeler quand vous en avez besoin. Dans l'exemple ci-dessous, 250 est la largeur de la div et 120 sa hauteur .  Encore un fois, où s etrouve ce code ? 

    Désolé pour ces questions basiques mais la manip est tellement tentante que j'ai vraiment envie la faire ! 

    30
    Samedi 15 Juin 2013 à 10:22

    merci sa marche je garde ton blog dans mes blog que je fouine bon week-end

    29
    Samedi 15 Juin 2013 à 10:11

    Il te manque } à la fin de ton code

    28
    Samedi 15 Juin 2013 à 10:02

    bonjour, j'essay depuis hier de mettre un curseur sur mon blog ,malgré l'aide apporter d'un copinaut, sa marche le code fonctionne toujours pas?

     il ma donner son propre code curseur chat qui il est aussi sur eklablog cher sa fonctionne mes moi non, voici le code peut tu me dire ou est l'erreur merci

     

    HTML,BODY{cursor:url("http://downloads.totally freecursor.com/cursor_files/cat71.ani"),url("http://downloads.totallyfreecursors.com/thumbnails/cat71.gif"),auto;

    27
    Mardi 19 Février 2013 à 16:27

    merci beaucoup !

    26
    Lundi 18 Février 2013 à 21:10

    Pour les images des derniers visiteurs, j'ai utilisé ce code:

    .module_menu_type_lastvisitors
    {transitionwidth 2s;
    -moz-transitionwidth 2s/* Firefox 4 */
    -webkit-transitionwidth 5s/* Safari and Chrome */
    -o-transitionwidth 2s/* Opera */ }
     
    .module_menu_type_lastvisitors img

    transition:500ms;
    -moz-transition:  500ms/* Firefox 4 */
    -webkit-transition500ms/* Safari and Chrome */
        -o-transition:  500ms/* Opera */  }

    .module_menu_type_lastvisitors img:hover
    transform:rotate(7deg);
    -ms-transform:rotate(7deg)/* IE 9 */
    -moz-transform:rotate(7deg)/* Firefox */
    -webkit-transform:rotate(7deg)/* Safari and Chrome */
        -o-transform:rotate(7deg)/* Opera */ 
     }

    25
    Lundi 18 Février 2013 à 18:45

    une question, quel est le CSS pour faire pivoter les images au survol ?

    Merci des réponces que tu me donera ^^

    24
    Vendredi 7 Décembre 2012 à 08:35

    Bonjour,

    Lorsque vous éditez votre article, vous cliquez sur le bouton Mode et vous choisissez Normal ou Expert. Cela affichera d'autres boutons et vous pourrez alors cliquer sur le bouton HTML

    23
    Jeudi 6 Décembre 2012 à 21:32

    bonsoir,

    comment je peux acceder à la partie HTML de ma page, donnez moi plus de détails je suis trés impatiente pour l'essayer.

    22
    dechap Profil de dechap
    Jeudi 23 Août 2012 à 21:07

    il ne marche pas! peu t'etre que mon blog a un problème de javascript. pourquoi ne fais tu pas de tutos vidéos? c'est facile a comprendre

    21
    Jeudi 23 Août 2012 à 08:23

    Comme ceci par exemple:

    <script type="text/javascript">// <![CDATA[

    function show_tooltip(event,larg,haut,coul,titre,baratin)

    {

    var x=event.clientX;

    var y=event.clientY;

    document.getElementById("tooltip").style.width =larg+'px';

    document.getElementById("tooltip").style.height =haut+'px'

    document.getElementById("tooltip").style.backgroundColor = coul;

    if (titre !='') {document.getElementById("titretooltip").innerHTML=titre}

    if (baratin !='') {document.getElementById("corpstooltip").innerHTML=baratin}

    document.getElementById("tooltip").style.left =(x+10)+'px';

    document.getElementById("tooltip").style.top =(y-haut -10)+'px';

    document.getElementById("tooltip").style.display ='block';

    }

    function unshow()

    {

    document.getElementById("tooltip").style.display ='none';

    }

    // ]]></script>

     

    <div id="tooltip" style="display: none; padding: 5px; border: 1px solid Black; border-radius: 10px; position: fixed; float: none; width: 60px;">

    <h3 id="titretooltip">pp</h3>

    <p id="corpstooltip" style="float: left; width: 150px;">&nbsp;</p>

    <p style="float: right;"><img src="http://data0.eklablog.com/av/21827561.jpg" alt="" width="50" height="50" /></p>

    </div>

    <p><a onmouseover="show_tooltip(event,300,150,'LightBlue','Mise &agrave; jour dans 1 semaine'+'&lt;br/&gt;'+'Vous trouverez toutes mes actualit&eacute;s sur cette article','')" onmouseout="unshow()">page priv&eacute;e</a></p>

    20
    dechap Profil de dechap
    Jeudi 23 Août 2012 à 03:49

    je kif grave tes tutos mais cette fois ci, ce tuto ma dépassé. j'ai essayé il ne marche pas voici le code :

    <script type="text/javascript">// <![CDATA[
    function show_tooltip(event,larg,haut,coul,titre,baratin)
    {
    var x=event.clientX;
    var y=event.clientY;
    document.getElementById("tooltip").style.width =larg+'px';
    document.getElementById("tooltip").style.height =haut+'px'
    document.getElementById("tooltip").style.backgroundColor = coul;
    if (titre !='') {document.getElementById("titretooltip").innerHTML=titre}
    if (baratin !='') {document.getElementById("corpstooltip").innerHTML=baratin}
    document.getElementById("tooltip").style.left =(x+10)+'px';
    document.getElementById("tooltip").style.top =(y-haut -10)+'px';
    document.getElementById("tooltip").style.display ='block';
    }
    function unshow()
    {
    document.getElementById("tooltip").style.display ='none';
    }
    // ]]></script>
    <div id="tooltip" style="display: none; padding: 5px; border: 1px solid Black; border-radius: 10px; position: fixed; float: none; width: 60px; ">
    <h3 id="titretooltip">pp</h3>
    <p id="corpstooltip" style="float: left; width: 150px;">pp</p>
    <p style="float: right;"><img src="http://ekladata.com/Q97lTr67ftDn0mdAOp2Hw7sNIEI/227407.jpg" alt="" width="50" height="50" /></p>
    </div>
    <a onmouseover="show_tooltip(event,250,120,'LightBlue','mise à jour dans 1 semaine','Vous trouverez toutes mes actualités sur cette article" onmouseout="unshow()">page privée</a>
     

    J'ai besoin de l'intégrer dans mon blog http://historia10.eklablog.fr/  

    19
    estelle45300
    Samedi 9 Juin 2012 à 14:37

    je ne comprend pas, je n'est pas de <div>...

    18
    Lundi 5 Mars 2012 à 19:47

    Bonjour je suis nul en CSS ^^ j'ai essayé de faire sa je copie voilà tout marche puis après, je modifie l'image..mais après je veux changer le titre quand on passe la souris dessus "Super tooltip" Et puis j'enregistre pour voir si cela marche mais non quand je passe dessus il n'y a plus rien mon texte se change de couleur au contact de la souris mais plus rien n'apparaît ..Pourriez-vous m'aidez?

    17
    boris_b
    Jeudi 2 Février 2012 à 23:49
    C'est gentil papasti ! Et rapide ;) j'ai trouvé un autre tooltip entre temps et uniquement pour des images http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery. Pour l'instant ça va. Si je galère, je reviens vers toi si tu veux bien. J'ai sauvegardé le fichier sur lequel j'ai travaillé avec le tuto que tu proposes, j'en aurais sûrement besoin. Et ta page est dans mes favoris. À bientôt.
    16
    Jeudi 2 Février 2012 à 22:30

    Oui bien sur que tu peux le faire.
    Il suffit simplement de modifier la source de l'image en fonction du texte survolé.
    Par exemple, tu mets une id à ton image.
    Tu ajoutes un argument à la fonction showtooltip qui sera l'url de l'image.
    Dans la fonction, tu rajoutes une ligne du type
    document.getElementById("idimage").src = argumenturl;

    Si mon explication n'est pas suffisante, dis le moi, je t'écrirai le code ^^

    15
    boris_b
    Jeudi 2 Février 2012 à 20:57
    Bonjour, j'ai appliqué ce tuto dans ma page d'accueil et j'en suis ravi. Je l'utilise pour afficher simplement une image. Mais ... il me faut une autre image ! C'est-a-dire que j'aimerai ajouter de nouveau un lien avec un second tooltip qui appellerai une deuxième image. Bref j'aimerai répéter l'opération dans la même page. Est-ce possible ? Le site dans lequel j'ai appliqué le tuto : www.8080dzgn.com/index.php
    Passez la souris sur "envies" dans le texte.
    Bravo pour ce tuto Papasti ;-)
    14
    Mercredi 1er Février 2012 à 10:50

    Bonjour, nouvelle sur la plateforme et souhaitant donner un certain style à mon blog, j'ai essayé ces explications et cela n'a rien donné.

    J'ai du faire un loupé dans une des étapes... assurément !

    j'ai inséré tout le code (en changeant couleur de fond, le texte et l'image) et à la fin seul apparaissait la phrase "passez la souris sur moi"... sans que rien ne se fasse.

    Faut il taper d'abord "passez la souris sur moi" dans la rédaction de l'article avant que de coller le code en htlm ?

    Merci pour votre réponse.

    Cordialement,

    13
    Lundi 9 Janvier 2012 à 08:13
    Pourquoi pas. Mais attention à la largeur quand même.
    12
    Dimanche 8 Janvier 2012 à 12:00
    Bonjour,
    est-ce qu'on peut mettre une "iframe" dans une div id ="tooltip" ?
    merci
    11
    Jeudi 29 Décembre 2011 à 16:25

    Oui on peut bien entendu. J'ai rajouté en fin d'article une image (icone de calendrier) sur lequel on peut passer la souris de la même façon.

    Le code correspondant est :

     <img onmouseover="show_tooltip(event,250,120,'LightBlue','Super tooltip','Vous ne trouvez pas ? On peut y placer quasiment tout, texte, images etc.')" onmouseout="unshow()" src="http://ekladata.com/7YsY-OKykwEmscP9QfWJRToqLTA.png" />

    10
    Kanzaki Profil de Kanzaki
    Jeudi 29 Décembre 2011 à 14:13

    Bonjour, j'ai une question : Il est possible qu'au lieu d'avoir du texte( "passez votre souris sur moi") on ai une image ? 
    Si oui comment ?
    Merci.  

    9
    Vanillette Profil de Vanillette
    Jeudi 8 Décembre 2011 à 15:57

    Bonjour,

    Etant toute nouvelle sur eklablog, je m'éfforce de rendre mon blog agréable, mais quel boulot depuis que j'ai commencé, fin novembre, début décembre. Je ne comprends pas comment je dois faire pour mettre une image sur les liens de ma rubrique. (voir colonne de gauche sans mon blog) tout en haut) de façon à ce que lorsque les visiteurs arrivent sur mon blog,  ils puissent voir d'emblée l'image du nouvel article que je viens de créer. Exemple : en passant la souris sur le lien qui les intéresse (soit le lien "chez moi"), on puisse voir l'image du dernier article posté. Me suis je bien fait comprendre ? Merci de m'aider. Bonne journée.

     

    8
    Vendredi 28 Octobre 2011 à 08:06

    On est bien d'accord.

    Personnellement, j'écris mon code sur un éditeur de texte (notepad++ ou Web Matrix) et je fais un test sur navigateur. Ensuite, je mets mon code dans l'article.

    7
    manicou Profil de manicou
    Vendredi 28 Octobre 2011 à 06:18

    Bonjour

    Attention tout de même avec le javascript (quand on trafique dessus) car tout peut planter et l'on peut perdre la page sur lequel on travaillait. Pour ma part ça n'a pas eu de conséquences trop facheuses mais le travail est à refaire. D'où l'intérêt de posséder une copie de son Blog. @+ :)

    6
    Jeudi 27 Octobre 2011 à 14:16

    Merci beaucoup ^^

    5
    Jeudi 27 Octobre 2011 à 12:28

    Je vais te préparer un truc en fonction de ce que tu as indiqué.

    4
    Jeudi 27 Octobre 2011 à 11:43

    ça marche bien, mais c'est pas vraiment ce que j'essayais de faire ^^

    En fait, je voudrais qu'il apparaisse en passant la souris sur le texte/image, qu'il reste en place quand on passe la souris dedans pour pouvoir faire des lien et qu'il disparaisse quand on enève la souris.

    J'ai réussit à le faire sur un forum, mais ça ne marche pas sur ekla...

    3
    Jeudi 27 Octobre 2011 à 08:45

    Y mettre des liens ne doit pas poser de problème puisqu'il s'agit d'une balise div quelconque. Dans l'exemple, je cache la balise avec l'evenement onmousout qui appelle la fonction unshow().

    Il te suffit donc d'ajouter tes liens et de supprimer l'évènement onmouseout. (en fait cela revient à un menu contextuel que tu pourrais appeler avec le clic droit)

    Si tu n'y arrives pas, recontacte moi

     

    2
    Jeudi 27 Octobre 2011 à 04:46

    Super! ça faisait un moment que je cherchais comment faire ^^
    Merci =) 

    Est-ce qu'on peut faire en sorte qu'il reste quand on passe la souris dedans, pour faire des liens par exemple? (j'y connais pas grand chose en javascript ^^')

    1
    Vendredi 21 Octobre 2011 à 03:36

    Merci Supeeer!

    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter