Plugin tipsy de jquery

tydoo · Plugin tipsy de jquery

SAlut a tous :)

Voila j'ai commencer la refonte totale de mon site en integrand plainement le social dans le site.

J'utilise tipsy; un plugin de jquery. Il permet d'afficher dans une box noir quand on passe sur une image ou un texte, un texte predefini. ( Comme sur facebook)

CE que je cherche a faire, c'est un encart pour les derniers membres inscrit. Il y a leurs photos et un liens vers la page du membre. Quand on passe le sourie sur l'image, le pseudo se met en tipsy en dessous de l'image.

Le probléme c'est que ca marche tres bien, mais seulement pour la premiére image.

Voila mon code php :

Code:

echo '
<td><a id="last-membre" tipsy="'.$variable["pseudo"].'" href="membre/fiche_membre.php?id='.$variable["id"].'"><img class="avatar" style="border: 0px solid ; width: 50px; height: 50px;" src="http://www.mdl-champollion.fr/static/img/photo/50/'.$variable["avatar"].'" /></a></td>';

La fonctions de tipsy est la version basique de tipsy :

Code:

$(function() {
    
    $('#last-membre').tipsy({gravity: 'nw'});
  });

Je voulais savoir comment faire pour que la fonction agisse sur toute mes images.

Le site de dev : tydoo.free.fr

Mister $$$ · 24-01-2011 01:10:50

tydoo · Re Plugin tipsy de jquery

J'ai trouvé comment contourné le probléme.

Lors de l'inscription d'un membre, un code php va rajouté la fonction + l'id du membre comme ca :

fonction(blablaID)

Comme ca il y aura une seule fonction pour un id unique :

Code:

$fichier = fopen("../../script/tipsy.js","a+");
fwrite($fichier,"\$(function(){\$('#last-membre".$row['total']."').tipsy({gravity:'nw'});});"."\r");
fclose($fichier);

La fonction de tipsy :

Code:

$(function(){$('#last-membreID_DU_MEMBRE').tipsy({gravity:'nw'});});

Et pour l'affichage, j'appelle l'id du membre :

Code:

id="last-membre'.$variable["id"].'"

C'est asser lourd apres dans le tipsy.js, car si j'ai 20 000 membre ca me ferra 20 000 fonction, mais c'est la seule possibilité que j'ai trouvé ! ;p

c00lman · Re Plugin tipsy de jquery

Salut tydoo,

Il y a plus simple et beaucoup plus léger!

Info bulle sur tout les liens sans exception:

Code:

  <script type="text/javascript">
$(function() {
$('a').tipsy();
});
  </script>

<a href="#" title="toto">a</a>
<a href="#" title="titi">b</a>
<a href="#" title="tutu">c</a>

Ainsi tout les liens dont l'attribut title="" est remplit afficheront le contenu de cet attribut dans l'info bulle.

Info bulle sur des liens précis :

Code:

  <script type="text/javascript">
$(function() {
$('#example').tipsy();
});
  </script>

<a class="example" href="#" title="toto">a</a>
<a class="example" href="#" title="titi">b</a>
<a class="example" href="#" title="tutu">c</a>

Il suffit de remplacer bêtement "id" par "class" car par définition un id est unique razz !!

Note : je ne connaissais pas ce JS avant ce poste...vive moi content (130) !

tydoo · Re Plugin tipsy de jquery

SAlut a tous :) alors ca ne marche pas ^^

Il ne veut pas prendre en compte la class ^^

Ca fait rien je reste sur mon systéme ^^

Sinon j'ai un autre probléme ^^

Voila j'ai mit du style a mon tipsy et ca marche mais j'ai un probléme.

Le background du tipsy marche, la back gauche du tipsy marche mais pas le droit :(

Le code CSS est bon, l'image y est, mais il ne veut pas l'afficher.

Le code TIPSY :

Code:

tip = $('
<div class="tipsy">
<div class="tipsy-left">
<div class="tipsy-inner">
' + $(this).attr('tipsy') + '
</div>
</div>
</div>
<div class="tipsy-right">
</div>');

J'ai essayer plusieux positions pour le "<div class="tipsy-right">" mais rien a faire. Il ne marche pas :(

Par contre le CODE CSS marche, car j'ai bien le padding qui se fait

le CODE CSS :

Code:

.tipsy { 
padding: 5px; 
font-size: 10px; 
background-repeat: no-repeat; 
}
.tipsy-left { 
background-image: url(/img/tipsy/tipsy-left.png);
background-repeat: no-repeat;
padding: 0px 4px;
}
.tipsy-right { 
background-image: url(/img/tipsy/tipsy-right.png);
background-repeat: no-repeat;
padding: 0px 4px;
}

.tipsy-inner { 
background-image: url(/img/tipsy/tipsy-back.png);
background-repeat: repeat-x;
padding: 6px 5px 7px 5px;
color: white; max-width: 200px; 
text-align: center; 
font-weight:bold; 
}

Pouvez vous m'aider svp :)

Dernière modification par tydoo (25-01-2011 19:39:47)

c00lman · Re Plugin tipsy de jquery

Salut,

Dans un premier temps, je te confirme que l'utilisation des "class" fonctionnes! Voici un simple teste réalisé à partir du site directement:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

  <script type="text/javascript" src="http://onehackoranother.com/projects/jquery/tipsy/assets/jquery-1.4.2.min.js"></script>
  <link rel="stylesheet" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css" type="text/css">
  <link rel="stylesheet" href="http://onehackoranother.com/projects/tipsy-docs.css" type="text/css">
  <script type="text/javascript" src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
  <title>typsy</title>
  <script type="text/javascript">
$(function() {
$('a').tipsy();
$('#example').tipsy();
});
  </script>
</head>
<body>

<a class="example" href="titi.php" title="teste1">Hover
over me</a>
<a class="example" href="toto.php" title="teste2">Hover
over me</a>

<a href="#" title="toto">a</a>
<a href="#" title="dg">b</a>
<a href="#" title="eegzg">c</a>
</body>
</html>

Concernant ton soucis d'intégration CSS, j'ai la flemme de décortiquer le code d'origine pour savoir ou tu as fait une boulette.

Annonce

#1 Plugin tipsy de jquery du 24-01-2011 01:10:50

Code:

Code:

24-01-2011 01:10:50

#2 Re Plugin tipsy de jquery du 24-01-2011 06:08:16

Re: Plugin tipsy de jquery

Code:

Code:

Code:

#3 Re Plugin tipsy de jquery du 24-01-2011 10:06:08

Re: Plugin tipsy de jquery

Code:

Code:

#4 Re Plugin tipsy de jquery du 25-01-2011 19:37:41

Re: Plugin tipsy de jquery

Code:

Code:

#5 Re Plugin tipsy de jquery du 26-01-2011 09:16:40

Re: Plugin tipsy de jquery

Code:

Partenaires de « créer un site internet »