18041 sujets

Questions générales et questions de débutants

[Résolu] Contenu tooltip s'affiche en bas de page

Bonjour,

Je reviens vers vous avec un nouveau problème.
J'ai créée une map interactive avec apparition d'un tooltip au survol de chacune de ces régions. Tout fonctionnerait bien si le contenu dudit tooltip ne s'affichait pas également sous ma map/en bas, à gauche de la page.
La page en question : http://testecarte.pagesperso-orange.fr/
J'ai essayé deux, trois trucs mais rien n'y fait et mon problème subsiste.

Voici le code que j'utilise :
<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Carte du Rhaëg</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  	<script src="https://code.jquery.com/jquery-3.3.1.min.js"
			integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
			crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
			integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
			crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"></script>		
	<script type="text/javascript">
		jQuery(function($){
			$('.map').append('<div class="overlay">')

			//Les 7 Tooltips
			$('#tooltip-1').tooltip({
				tooltipClass: "uitooltip",
				position: { 
					my: "left+310px, top+220px", 
					at: "left top", 
				},
				content: "<h3>Orën</h3> <img src='https://image.noelshack.com/fichiers/2019/11/4/1552585247-minioren.png'/> Description à venir.",
			});

			$('#tooltip-2').tooltip({
				tooltipClass: "uitooltip",
				position: { 
					my: "left+310px, top+400px", 
					at: "left top", 
				},
				content: "<h3>Qahra</h3> <img src='https://image.noelshack.com/fichiers/2019/11/4/1552585247-miniqahra.png'/> Description à venir.",
			});

			$('#tooltip-3').tooltip({
				tooltipClass: "uitooltip",
				position: { 
					my: "left+310px, top+550px", 
					at: "left top", 
				},
				content: "<h3>Ssyl\'Shar</h3> <img src='https://image.noelshack.com/fichiers/2019/11/4/1552585247-minissyl-shar.png'/> Description à venir.",
			});
			
			$('#tooltip-4').tooltip({
				tooltipClass: "uitooltip",
				position: { 
					my: "left+600px, top+350px", 
					at: "left top", 
				},
				content: "<h3>Ys</h3> <img src='https://image.noelshack.com/fichiers/2019/11/4/1552585423-miniys.png'/> Description à venir.",
			});

			$('#tooltip-5').tooltip({
				tooltipClass: "uitooltip",
				position: { 
					my: "left+800px, top+180px", 
					at: "left top", 
				},
				content: "<h3>Vaendark</h3> <img src='https://image.noelshack.com/fichiers/2019/11/4/1552585247-minivaendark.png'/> Description à venir.",
			});

			$('#tooltip-6').tooltip({
				tooltipClass: "uitooltip",
				position: { 
					my: "left+840px, top+420px", 
					at: "left top", 
				},
				content: "<h3>Undòmë</h3> <img src='https://image.noelshack.com/fichiers/2019/11/4/1552585247-miniundome.png'/> Description à venir.",
			});						

			$('#tooltip-7').tooltip({
				tooltipClass: "uitooltip",
				position: { 
					my: "left+700px, top+600px", 
					at: "left top", 
				},
				content: "<h3>Tol Orëa</h3> <img src='https://image.noelshack.com/fichiers/2019/11/4/1552585247-minitolorea.png'/> Description à venir.",
			});

            //On passe sur une région
			$('.map area').mouseover(function(){
				var index = $(this).index();
				var left = -index * 1239 - 1239;
				$('.map .overlay').css({
					backgroundPosition : left+"px 0px"
				});
			});

            //On sort de la map
			$('.map').mouseout(function(){
                $('.map .overlay').css({
                	backgroundPosition : "1239px 0px"
                });
             }); 
		});
	</script>
	<link rel="stylesheet" type="text/css" href="style2.css"/>
</head>
<body>
	<div class="map" id="map">
		<img src="https://image.noelshack.com/fichiers/2019/11/4/1552583812-void.png" width="1239" height="910" usemap="#Map" id="mon_image" alt="Vide" />
        <map name="Map">
        <area id="tooltip-1" title="Orën" alt="Orën" shape="poly" coords="260,455,271,452,285,427,308,421,316,411,340,416,367,411,369,395,347,383,354,378,391,388,434,369,452,369,485,292,496,286,498,278,508,265,499,256,473,259,474,249,453,228,459,219,458,201,442,187,375,175,319,188,308,206,273,215,273,200,261,200,235,217,218,240,174,238,172,258,178,296,182,314,192,322,201,323,209,336,221,337,226,362,244,380,240,398,250,417,241,451"  href="#" />
		<area id="tooltip-2" title="Qahra" alt="Qahra" shape="poly" coords="239,454,278,459,289,469,306,457,309,446,321,442,351,455,388,433,411,409,432,405,451,417,456,434,446,448,442,463,417,472,421,481,442,472,476,480,495,498,513,500,509,514,477,516,469,503,437,514,340,519,308,515,299,503,290,505,282,517,271,523,253,512,222,510,215,489,206,477,223,468,230,460"  href="#" />
		<area id="tooltip-3" title="Ssyl\'Shar" alt="Ssyl\'Shar" shape="poly" coords="241,536,286,529,374,531,393,550,370,593,343,585,357,600,357,612,384,627,412,653,471,670,480,665,492,667,494,655,507,652,544,654,556,669,571,670,570,681,551,694,534,703,514,703,500,694,449,713,423,711,421,701,391,705,389,716,372,712,345,725,331,718,318,717,301,721,277,719,264,722,256,711,241,694,239,661,257,646,232,642,225,632,205,634,210,619,220,615,204,588,231,564"  href="#" />
		<area id="tooltip-4" title="Ys" alt="Ys" shape="poly" coords="619,356,664,360,684,378,716,382,724,395,717,415,735,414,735,433,713,478,682,496,645,505,625,496,599,491,585,470,576,436,590,406,596,384,607,361"  href="#" />
		<area id="tooltip-5" title="Vaendark" alt="Vaendark" shape="poly" coords="831,394,862,388,833,357,841,344,886,334,913,336,934,324,952,323,966,309,992,306,1008,291,1030,249,1055,244,1056,205,1067,198,1062,155,1045,157,1036,167,1017,140,1002,140,994,154,980,156,977,167,965,155,927,149,902,149,876,168,848,175,835,173,830,151,819,152,811,159,807,149,784,145,761,157,734,153,690,168,654,191,593,184,571,189,548,194,543,223,565,229,581,231,604,243,624,252,639,239,665,242,692,212,708,218,721,204,732,219,722,244,725,260,742,265,739,271,707,276,688,326,716,342,748,347,769,338,774,349,792,354,801,362,814,363,825,384"  href="#" />
		<area id="tooltip-6" title="Undòmë" alt="Undòmë" shape="poly" coords="834,396,865,390,883,403,898,406,903,414,913,412,933,420,938,412,951,394,966,403,994,407,1020,427,1031,440,1021,476,1035,484,1037,509,1040,528,1037,553,1024,574,1014,574,1014,590,1008,600,973,620,957,608,942,599,911,585,896,573,882,571,876,563,859,564,829,556,822,564,801,568,778,572,746,548,760,528,761,512,767,474,781,461,795,442,809,437,819,448,826,429,861,413,853,404"  href="#" />
		<area id="tooltip-7" title="Tol Orëa" alt="Tol Orëa" shape="poly" coords="743,599,783,606,792,617,829,614,841,611,858,618,865,628,878,643,873,666,856,668,848,685,820,711,808,716,801,732,766,754,735,761,707,770,679,769,657,764,634,752,651,717,668,691,695,671,720,619,736,597"  href="#" />
        </map>
	</div>	
</body>
</html>


Et le CSS :
.map{
	width: 1239px;
	height: 910px;
	background: url(map.png) left top no-repeat;
	position: relative;
}
.map .overlay{
	width: 1239px;
	height: 910px;
	background: url(map.png) 1239px top no-repeat;
	position: absolute;
	top:0;
	left:0;
	z-index: 1;
}
.map img{
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
}

.uitooltip{
	position: absolute;
	border-radius: 5px;
	color: #F0D482;
	background: #000;
	width: 250px;
	height: 150px;
	padding: 0 10px;
	display: inline;
	top: 0;
	left: 0;
	z-index: 3;
	text-align: center;
	pointer-events: none;
	font-family: Metamorphous, "Times New Roman", Georgia, Arial, serif ;
	font-size: 10px;
}

@font-face{
	font-family: Metamorphous;
	src: url(Metamorphous-Regular.ttf);
}


Merci d'avance pour votre aide, quelle qu'elle soit !
Modifié par SkullCat (15 Mar 2019 - 20:42)
Hello

J'ai inspecté le DOM du site (ctrl + u) et j'ai vu pas mal d'erreurs. En autres, un mauvais DOCTYPE, des balises qui se répètent, d'autres sûrment pas fermées, des attributs "scr" au lieu de "src", bref, il y a des erreurs.

Inspecte la qualité de ton code ici: https://validator.w3.org/
Corrige les erreurs
On verra ensuite si le problème persiste
Si tu pouvais isoler les codes CSS et JS dans leur propre fichier, tu t'y retrouverais mieux aussi. C'est une bonne pratique Smiley smile
Merci de ta réponse.
Je me suis permise d'éditer mon message originel pour diriger vers une page plus "clean" : http://testecarte.pagesperso-orange.fr/

L'autre page n'étant pas entièrement de mon fait, je ne peux pas en modifier le code et donc, en corriger les erreurs. Je n'en ai pas les droits =/

J'ai inspecté la nouvelle page via le site que tu m'as conseillé et je pense avoir corrigé les erreurs qui restaient. Mon problème subsiste malgré tout =/

Pour les fichiers CSS et JS, là où j'héberge actuellement mon code, je n'ai pas la possibilité de les héberger sur une page à part ( Si j'ai bien compris ta réflexion ).
Je pense avoir compris.
En fait, les tooltips sont dupliquées en bas pour des raisons d’accessibilité, ce qui est une bonne chose pour les personnes mal-voyantes. Donc si tu veux les cacher (et perdre en accessibilité), il faudra les cacher en CSS avec ceci:


.ui-helper-hidden-accessible{
display: none;
}
Meilleure solution
Salut!
J'ai le même problème avec le site, mais j'ai également remarqué qu'il y avait un problème avec le contenu.
Je vous conseille de vérifier votre site en utilisant ce produit https://sitechecker.pro/fr/ qui a été conçu pour vérifier les pages Web.
Faites-moi savoir si cela a aidé Smiley cligne
Sujet clos
Aller à