Discussion :

[fidbell84]

Bonjour,

Je veux créer un tooltip lorsque je passe le curseur sur l'image un test sous forme de tootltip s'affiche.

Bref, j'ai trouvé plein d'exemple mais je sais pas pourquoi ne fonctionne pas avec mon code.

Je besoin de votre aide merci d'avance

[Invité]

Bonjour,
et tu n'as pas encore compris qu'il fallait montrer ton code, pour avoir une chance d'avoir une réponse pertinente ?

[fidbell84]

voila mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
		<script>
					$(document).ready(function () {
					  $("img").tooltip({
						'selector': '',
						'placement': 'left',
						'container':'body',
					  });
					});
					$('.auto-tooltip').tooltip();
		</script>

et dans le coprs de fichier html :

Code :

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

<img style="margin-left: 250px; width: 60px; height: 60px;" src="img/home/image.jpg" href="#" rel="tooltip" title="Lorem ipsum dolor sit amet"></img>

N.B: je suis entrain d'integrer ce code dans un projet utilisant angularjs

[Invité]

Bonjour,
tu n'as pas suivi le mode d'emploi ?

+ il serait bon de connaitre la syntaxe correcte de la balise <img> :

Code html :

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

<img src="........" alt="...." title="...." />

En l'occurence, ce code fonctionne (testé) :

Code html :

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

1
2
3
4
5
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
 
<img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1428819251" title="Lorem ipsum dolor sit amet" alt="" />

Code javascript :

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

1
2
3
4
5
6
7
$(document).ready(function () {
   $('img').tooltip({
      'selector': '',
      'placement': 'top',
      'container':'body',
   });
});