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/

[-Nikopol-]

1) apprends les bases, on te le répète depuis 2 jours sur le chat
2) ton code est illisible et incorrect. apprends à mettre du JS dans un code externe et pas dans les div c'est illisible et pas maintenable. Tous tes id sont identiques

Ce code par exemple, je ne cherche meme pas à comprendre

Code :

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

1
2
3
<button name="add_to_cart" id="3" 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>
<button name="add_to_cart" id="3" 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>
<button name="add_to_cart" id="3" 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>

Comme dit @psychadelic ce n'est pas clair, on est plusieurs sur le chat à avoir essayé de t'aider et demander d'être clair dans ta demande ... mais tu fais comme tu veux c'est pas obligatoire de se faire comprendre...

[ishaq74]

Les seules personnes qui ont essayé de m´aider sur le chat n'ont pas réussi a obtenir non plus ce que j'essaye d'obtenir.

Le code que tu me montres, j'ai expliqué 40 fois que c'est la seule solution qui marche reellement pour l'instant. (Que dans le jsfiddle et pas sur ma page php malheuresement). Alors oui c'est tres moche, tres degueulasse mais ca fonctionne. J'en suis pas fier, je cherche encore d´autres solutions.

[Watilin]

J’ai repris le code de ton fiddle :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<button name="add_to_cart" class="button add_to_cart">
  Ajouter
  <div class="tooltip">Article ajoute</div>
</button>
<button name="add_to_cart" class="button add_to_cart">
  Ajouter
  <div class="tooltip">Article ajoute</div>
</button>
<button name="add_to_cart" class="button add_to_cart">
  Ajouter
  <div class="tooltip" >Article ajoute</div>
</button>

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.tooltip {
  display: none;
  font-size: 10px;
  color: #FFF000;
  position: absolute;
  padding: 3px 7px;
  border: 1px solid #FFFFFF;
  background: #1E90FF;
  z-index: 9999;
}
 
.tooltip::before {
  content: "\2713\00A0";
  color: #FFF000;
}

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
jQuery(document).ready(function($) {
  "use strict";
 
  $(".add_to_cart").on("click", function(event) {
    var target = $(this).find(".tooltip");
    target.css("display", "block");
    setTimeout(function() {
      target.css("display", "none");
    }, 300);
  });
});

Avec ça tu as un HTML bien plus lisible et ça te donne une bonne base pour rajouter les id qui te manquent (si tu les juges toujours nécessaires) avec PHP.

[ishaq74]

Le code est plus visible, merci. Ca fera plaisir à Nikopol
Mais il ne fonctionne pas du coup.

En revanche, j'ai réussi :

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
<script>
$(document).ready(function(){
 
  $(".add_to_cart").on('click', function(){
    // Show our tooltip on click
    $(this).get(0).hideIt = hideTimeout($(this).parent().attr('id'));
    $(this).parent().find(".tooltip").show();
  });
      // Hide our tooltip
    function hideTimeout(eltid ) { this.pass=eltid;
    setTimeout(function(){
    $('#'+eltid).parent().find(".tooltip").hide();}, 300);}
 
});
</script>