Tayo
Astuce et Tutorial » Programmation / Developpement » Javascript » Aide rédigée par Zabuza
Description de cet article : Un tutoriel Vidéo pour réaliser un tooltip avec Jquery
Lire les commentaires

Tutoriel Jquery tooltip





Voici une vidéo d'environ 25 minutes avec explication retraçant l'utilisation d'un script jquery pour créer un tooltip. Le but est ici de comprendre les bases du jquery pour réaliser son premier script. Création de la page html, ajout du contenu, du css et mise en condition.

 


Sommaire du tutoriel


Exemple tooltip traditionnel et modifié


Pour comprendre, voici à quoi ressemblera le tooltip, réalisé grâce à jquery. Notez qu'il n'est pas configuré spécifquement, le style étant entièrement personnalisable.


Exemple :

Laissez le curseur quelques instants sur le lien traditionnel :


Tooltip classique

Tooltip Jquery

 


Comme vous pouvez le voir, sur le premier lien, le tooltip est basique, il est dépendant de votre navigateur web ( firefox, internet explorer, google chrome.. ). Par contre, le deuxième lien voit une première approche de style, qui permet toute la créativité de votre imagination. Vous pourrez en effet en changer l'aspect, imaginez avec une icone / image, une police de caractère que vous aurez choisie, en clair, tout est réalisable.



Voici comment faire, en vidéo, en partant des bases ce script jquery, au travers de ce tutorial.


 


Video Tutoriel Jquery : Tooltip


Servons nous du prétexte de vouloir créer un script tooltip pour bien prendre des bases en jquery, avec au passage des petits rappels sur le comportement css / html. Voici une vidéo en français de plus de 20 minutes pour vous aider à y arriver.


 


Votre Navigateur internet ne supporte pas la lecture de vidéo flash.



Contenu Tuto


Nous allons essayé d'évoquer ici rapidement en texte ce dont il est question, d'abord, le script de la page en copié / collé :


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Document sans nom</title>

<style type="text/css">

body {

background:#06C;

color:white;

    

}

.inutile {

width:500px;

border:solid 1px red;

padding:6px;

margin-left:auto;

margin-right:auto;

margin-top:400px;

}

.tototooltip { color:white; }

.propretooltip {

border:solid 2px white;

padding:5px;

position:absolute;

color:white;

background:#000;

display:none;

opacity:0.7;

max-width:200px; color:#CBE2FC

    

}

</style>    

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

                           montooltip(".tototooltip");

                           });



function montooltip(coco) {

    $(coco).each(function(i) {

$('body').append("<div id='propretooltip" +i+ "' class='propretooltip'>" +$(this).attr('title')+ "</div>");  

var montp =$('#propretooltip' +i);

                          $(this).removeAttr("title").mouseover(function(lamouse) {

montp.css({left:lamouse.pageX +10, top:lamouse.pageY+10}).fadeIn(500);



                                                    }).mouseout(function(lamouse) {;

montp.fadeOut(500);                        

                                                    }).mousemove(function(lamouse) {

montp.css({left:lamouse.pageX +10, top:lamouse.pageY+10}) ;

                                                    });

                        

                         });

    

}

</script>

</head>





<body>

<div class='inutile'>

<a href='http://www.google.fr' id='blabla' class='tototooltip' title='Visiter le moteur de recherche le plus chouette du monde car il est trop cool il est mieux que bing.com'>Gooooooooooooooooooooooogle</a><br /><br />

<a href='/' class='tototooltip' title='Se rendre sur le site Tayo.fr'>Tayo.fr</a>



</div>

</body>

</html>

 

Ensuite, les points importants :



On appelle jquery avec :


[code=html]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>[/code]

Pour attendre que la page soit chargée dans le code javascript :


[code=javascript]

$(document).ready(function() {

//vos fonctions ici

                           });

[/code]

 


On commence jquery avec le signe $, l'identifiant entre ( ), puis ce que l'on souhaite faire. each pour "chaque".

.append() pour ajouter du contenu.

.mouseover() pour une fonction lorsque la souris passe près de l'élément en question.

.fadein(400) pour un joli effet d'arrivé en 400 millisecondes; etc.


[code=javascript]

$(document).ready(function() {

                           montooltip(".tototooltip");

                           });



function montooltip(coco) {

    $(coco).each(function(i) {

$('body').append("<div id='propretooltip" +i+ "' class='propretooltip'>" +$(this).attr('title')+ "</div>"); 

var montp =$('#propretooltip' +i);

                          $(this).removeAttr("title").mouseover(function(lamouse) {

montp.css({left:lamouse.pageX +10, top:lamouse.pageY+10}).fadeIn(500);



                                                    }).mouseout(function(lamouse) {;

montp.fadeOut(500);                         

                                                    }).mousemove(function(lamouse) {

montp.css({left:lamouse.pageX +10, top:lamouse.pageY+10}) ;

                                                    });

                         

                         });

   

}

[/code]

 


 



réduireNews
réduireTutoriel lié
  • Tutoriel Jquery tooltip
    Un tutoriel Vidéo pour réaliser un tooltip avec Jquery
  • : tooltip sans javascript
    Une balise html permettant d'afficher des mots au passage de la souris
  • Mettre en Français Blender
    Blender Anglais ==> Français en tutoriel vidéo
  • Test VPN ipjetable
    Parlons peu, parlons bien
  • Dans la même catégorie : Javascript

    Passer l'activation de Windows 7 temporairement avec invite de commande

    Comprendre l'API Youtube pour gérer le temps des vidéo
    réduireSocial

    rss 3D png rss 3D png


    Pseudo :
    Pass :
    Les lecteurs ont donné une note moyenne de :
    note 9
    Note: 9 sur 10

    Donnez votre note à ce tuto sur 10 :

    Forcer l'affichage unique de votre site web.

    Problème de guillemets en javascript ?

    Comprendre l'API Youtube pour gérer le temps des vidéo

    Liste des commentaires pour Tutoriel Jquery tooltip


    Il y a 6 années, 1 mois
    merci beaucoup pour ton tutu
    Votre PseudoIl y a 0mn
    Votre commentaire forum
    Vous avez la parole
    Laissez un commentaire sur cet article.
    Pseudo :


    Facultatif : Cliquez ici pour choisir une tête
    Votre email ( non publié ) :

    Image anti spam :
    Code Image
    Recopier les 5 chiffres de cette image :






    Prendre contact avec Tayo.fr : Formulaire Tayo

    Tayo.fr, copyright jusqu'en 2233 ( Au moins ! ).