Affichage Tooltip temporisée

Version imprimable

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:

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,

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:

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 :calim2:

24/05/2019, 15h05
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
24/05/2019, 15h22
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.
24/05/2019, 16h43
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
24/05/2019, 16h46
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/

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 :calim2:

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

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...

24/05/2019, 18h18
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.

J’ai repris le code de ton fiddle :

Code:

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:

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:

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.

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

En revanche, j'ai réussi :

Code:

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>