Discussion :

[ishaq74]

Bonjour,

J'ai mis en place un tooltip sur mon site, de manière à lorsqu'un utilisateur clique sur le bouton "add_to_cart", il apparait un tooltip "article ajouté".

Par javascript by class=.addtocart


Besoin d'aide s'il vous plait.

Avec ce code, cela fonctione très bien, mais les tooltip ne disparaissent pas comme prévu.

EDIT =

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
$(document).ready(function(){
 
  $(".add_to_cart").on('click', function(){
    // Show our tooltip on hover
    hideTimeout($(this).parent().attr('id'));
    $(this).parent().find(".tooltip").show();
  })
      // Hide our tooltip
    function hideTimeout(eltid ) { this.pass=eltid;
    setTimeout(function(){
    console.log(this.pass);
    $('#'+eltid).find(".tooltip").hide()}, 300);}
 
});
</script>

.

Merci beaucoup,

[ishaq74]

Petit Up :

J'ai essayé de m'en sortir par tous les moyens mais j'obtiens rien de parfait.

Soit le show fonctionne mais pas le hide. Soit tout fonctionne mais pas au bon endroit (juste sous le bouton), soit le code fonctionne que pour le premier input.

J'ai fini par trouver ça :

https://jsfiddle.net/osp92nbL/

Mais je n'arrive pas a le faire fonctionner dans un code php comme celui ci

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
foreach($result as $row)
	{
		$output .= '
		<div id="produit">
        <li>'.$row["name"].'</li>
<img src="images/'.$row["image"].'" width="40" height="40"/>
          <li><strong>'.$row["price"].'</strong></li>
		  <input type="hidden" name="quantity" id="quantity' . $row["id"] .'" value="1" />
            	<input type="hidden" name="hidden_name" id="name'.$row["id"].'" value="'.$row["name"].'" />
            	<input type="hidden" name="hidden_price" id="price'.$row["id"].'" value="'.$row["price"].'" />
        <button name="add_to_cart" id="'.$row["id"].'" class="button add_to_cart" onclick="var target=childNodes[1];target.style.display="block";setTimeout(function(){target.style.display="none"},300)" />Ajouter<div id="tooltip" class="tooltip"  style="display:none;">Article ajoute</div></button>
		</div>
		';
	}

Quelqu'un pour m'aider à l'implémenter ou a trouver une autre solution si cela est impossible s'il vous plait ? Le jsfiddle montre exactement ce que je souhaite obtenir

Merci

[psychadelic]

des ToolTip il en existe des "millions" => https://github.com/search?l=JavaScri...e=Repositories

mais pour ce genre de cas il faudrait mieux utiliser un toster => https://github.com/search?l=JavaScri...e=Repositories

[ishaq74]

Non, Je n'en ai trouvé aucun qui puisse répondre à mon probleme, car ils répondent pas aux trois critères listés :

1- Input type button avec la meme class (id étant une variable).
2- Show et Hide automatiquement après un délai, donc un seul clik => show....hide.
3-Vu qu'il y a plusieurs type button, il faut que chaque "tooltip" se place sous le bon bouton.

Le code parfait, je m'attends pas à le trouver hein, je dis juste que meme en trouvant trois codes séparés, je n'arrive pas à obtenir ce que je souhaite.

Merci en tout cas d'avoir pris le temps de te pencher sur mon problème et d'avoir tenté une solution.

[psychadelic]

Comprends pas trop, ..
tu pars d'un bout de code en jQuery, puis tu montre un exemple en JS pur (sur jsfiddle) en mettant du PHP , puis maintenant il a "des critères"...

c'est pas tres cohérent.. et du coup je ne vois pas du tout ce que tu recherche à obtenir

[ishaq74]

Ce que je cherche à obtenir => https://jsfiddle.net/osp92nbL/

Le code php c'est pour mon site, c'est bien beau que le jsfiddle fonctionne, mais si il marche pas dans mon site ca sert a rien.

Je suis parti à la base de jquery oui, mais j'obtiens pas le résultat que je veux : https://jsfiddle.net/L4q2fvtx/1/