-
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.
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 baliseDè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>
Tags : tooltip, style, document, getelementbyid, balise
-
Commentaires
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
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 !
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;
Pour les images des derniers visiteurs, j'ai utilisé ce code:
.module_menu_type_lastvisitors
{transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 5s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */ }
.module_menu_type_lastvisitors img
{
transition:500ms;
-moz-transition: 500ms; /* Firefox 4 */
-webkit-transition: 500ms; /* 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 */
}
une question, quel est le CSS pour faire pivoter les images au survol ?
Merci des réponces que tu me donera ^^
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
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.
22dechap
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
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;"> </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 à jour dans 1 semaine'+'<br/>'+'Vous trouverez toutes mes actualités sur cette article','')" onmouseout="unshow()">page privée</a></p>
20dechap
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/
19estelle45300Samedi 9 Juin 2012 à 14:37
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?
17boris_bJeudi 2 Février 2012 à 23:49C'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.
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 ^^
15boris_bJeudi 2 Février 2012 à 20:57Bonjour, 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 ;-)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,
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" />
10Kanzaki
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.9Vanillette
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.
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.
7manicou
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. @+ :)
ç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...
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
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 ^^')
Suivre le flux RSS des commentaires
Vous devez être connecté pour commenter
Créer mon blog
Super tuto ! Merci !