Bonjour,

Je suis toute nouvelle sur le forum et très, TRES débutante en matière de codage alors je m'excuse si la question a déjà été posée ... Voici mon problème :
J'ai suivi un tuto pour créer une carte interactive, avec un tooltip indiquant le nom des différentes régions au survol des différentes areas par la souris. Jusqu'ici, tout va bien.
Seulement, ça se complique à partir du moment où j'aimerais personnaliser ce tooltip. Mon projet est clair, j'aimerais que mon tooltip change de forme au survol pour ressembler à l'exemple ci-contre : upload/1551285493-74656-exemple.png

Je ne sais pas si c'est possible mais si oui, je sais encore moins comment m'y prendre. J'avais pensé à intégrer une image dans mon tooltip mais je n'ai pas trouvé comment faire ... Peut-être aussi qu'il existe un manière plus simple de réaliser mon projet.
Dans tous les cas, j'ai besoin d'aide et je remercie d'avance toute personne qui voudra bien m'accorder un peu de son temps pour me guider.

Voici le code html utilisé :
<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Carte du Rhaëg</title>
	<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript">
		jQuery(function($){
			$('.map').append('<div class="overlay">').append('<div class="tooltip">Salut les gens</div>')
			$('.map .tooltip').hide();

			var regions=[
			{name:'Orën',slug:'oren'},
			{name:'Qahra',slug:'qahra'},
			{name:'Ssyl Shar',slug:'ssyl-shar'},
			{name:'Ys',slug:'ys'},
			{name:'Vaendark',slug:'vaendark'},
			{name:'Undòmë',slug:'undome'},
			{name:'Tol Orëa',slug:'tol-orea'}
			];
              
            //Tooltip qui suit la souris
            $(document).mousemove(function(e){
            	$('.map .tooltip').css({
            		top:e.pageY-$('.map .tooltip').height()-20,
            		left:e.pageX-$('.map .tooltip').width()/2-10
            	});
            });
            
            //On passe sur une région
			$('.map area').mouseover(function(){
				var index = $(this).index();
				var left = -index * 1100 - 1100;
				$('.map .tooltip').html(regions[index].name).stop().fadeTo(500,1);
				$('.map .overlay').css({
					backgroundPosition : left+"px 0px"
				});
			});

            //On sort de la map
			$('.map').mouseout(function(){
                $('.map .overlay').css({
                	backgroundPosition : "1100px 0px"
                });
                $('.map .tooltip').stop().fadeTo(500,0);
			});
		});
	</script>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
	<div class="map">
		<img src="void.png" width="1100" height="800" usemap="#Map" id="mon_image" />
        <map name="Map">
          <area shape="poly" coords="184,220,177,196,184,182,212,187,261,143,280,159,301,153,325,127,378,119,440,133,449,163,437,175,458,183,463,201,490,199,488,218,479,220,465,237,440,299,416,303,385,321,354,316,367,339,347,348,309,346,291,360,266,384,246,384,242,373,249,348,236,336,248,322,227,301,207,269,184,254,184,229"  href=""/>
		  <area shape="poly" coords="237,385,258,386,275,387,287,393,301,385,309,373,322,374,336,383,352,382,375,363,393,359,393,351,417,335,442,365,432,375,426,389,403,399,414,404,432,400,473,410,476,421,496,426,491,438,462,440,456,430,425,438,383,440,316,442,297,438,295,431,286,431,281,445,265,449,255,443,254,435,233,438,213,427,218,414,206,410,219,397,230,387"  href="" />
		  <area shape="poly" coords="263,456,338,456,367,452,386,475,359,517,350,515,353,531,398,567,455,584,472,582,473,568,525,570,537,585,555,590,530,609,513,618,496,617,489,607,453,623,421,628,407,614,384,617,376,632,338,638,311,629,274,635,254,633,238,602,237,582,229,554,203,549,217,531,208,503,233,483,241,459"  href="" />
		  <area shape="poly" coords="569,416,556,367,584,290,648,293,692,318,705,350,688,398,655,424,614,430,589,422"  href="" />
		  <area shape="poly" coords="779,318,814,311,804,281,857,264,862,272,894,266,942,244,956,232,982,187,1001,191,1007,180,1011,139,1011,101,993,107,978,110,965,87,948,98,928,111,882,95,852,98,838,112,804,122,792,97,747,92,719,103,698,98,654,116,633,134,605,136,559,130,538,136,523,161,546,175,580,185,606,196,621,184,640,185,665,157,695,163,690,191,709,209,675,219,660,265,687,277,724,282,731,275,746,288,761,290,773,301,782,313"  href="" />
		  <area shape="poly" coords="785,318,809,313,854,337,894,345,903,327,936,337,942,337,974,354,982,380,987,425,992,472,969,514,924,543,898,522,858,504,836,489,794,479,777,490,744,493,715,474,726,454,723,435,736,431,729,411,753,384,768,365,785,371,812,343,804,332"  href="" />
		  <area shape="poly" coords="710,516,748,524,763,537,799,531,822,536,840,562,833,586,811,582,809,587,813,594,774,631,745,659,688,676,662,680,643,676,625,675,609,657,624,627,643,601,665,585,687,538,701,520"  href="" />
        </map>
	</div>
</body>
</html>


Et le css :
.map{
	width: 1100px;
	height: 800px;
	background: url(map.png) left top no-repeat;
	position: relative;
}
.map .overlay{
	width: 1100px;
	height: 800px;
	background: url(map.png) 1100px top no-repeat;
	position: absolute;
	top:0;
	left:0;
	z-index: 1;
}
.map img{
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
}
.map .tooltip{
	position: absolute;
	border-radius: 5px;
	color: #FFF;
	background: #000;
	padding: 0 10px;
	display: inline;
	top: 0;
	left: 0;
	z-index: 3;
	text-align: center; 
}


Voilà, je crois que j'ai tout dit/mis. Encore merci à quiconque voudra bien m'aider !
Pas de soucis, j'ai dû mal m'exprimer.

http://testecarte.pagesperso-orange.fr/

Là, j'ai ma carte, avec un tooltip tout simple : un oval noir avec le nom des régions que l'on survole ( C'est pour un forum de jeu en ligne ). J'aimerais personnaliser ce tooltip pour qu'il ressemble à l'exemple en image que j'ai mis plus haut.

Suis-je plus claire ?
Oui, c'est plus clair maintenant. Tu veux mettre un filtre de couleur sur la partie survolée ? Si, c'est bien ça, ça se joue au niveau de ton code CSS. Smiley cligne
Modifié par Tintin75 (28 Feb 2019 - 09:46)
Mmh non ^^", ça fonctionne déjà ça ^^".

J'aimerai que l'infobulle qui s'affiche quand on passe au dessus d'un continent soit "jolie". C'est à dire qu'elle prenne la forme que je mets en première image de mon post. Là c'est juste un carré.
Salouté ! et bienvenue

Alors j'ai regardé un peu, mais j'ai trop de boulot à coté en ce moment

par contre j'ai des pistes !

Donc explications :

Tu peux "dessiner" ton tooltip comme tu le souhaite (bonne nouvelle!)
il suffit de modifier le code existant css :
.map .tooltip {
    position: absolute;
    border-radius: 5px;
    color: #FFF;
    background: #000;
    padding: 0 10px;
    display: inline;
    top: 0;
    left: 0;
    z-index: 3;
    text-align: center;
}


Mais attention, si tu modifie le padding, ou la taille etc... que tu l'agrandit quoi, tu vas avoir un problème qui fait "disparaitre" ce tooltip.. Car vu qu'il est plus grand il vient en dessous du cursor de la souris et du coup tu n'es plus en "survol de region" donc plus de tooltip... cercle vicieux..

Du coup pour palier ce problème du doit d'abord modifié les règles de calculs de positionnement du tooltip (tkt , c'est des grands mots, mais c'est pas grand chose)

malheureusement je ne peux pas modifier à la volé. mais j'imagine que pour changer la position justement il faut trafiquer ceci :
            $(document).mousemove(function(e){
            	$('.map .tooltip').css({
            		top:e.pageY-$('.map .tooltip').height()-20,
            		left:e.pageX-$('.map .tooltip').width()/2-10
            	});
            });

et en particulier le "20" et le "10".
Bonsoir et merci pour la réponse.

Après moult bidouillage et recherche, j'ai reussi un truc qui s'en rapproche à peu pres en touchant au css

.map .tooltip{
	position: absolute;
	border-radius: 5px;
	color: #FFF;
	background: url(test2.png) scroll 0 0 transparent;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 74px;
	width: 75px;
	padding: 0 10px;
	display: block;
	top: 0;
	left: 0;
	z-index: 3;
	text-align: center;
	vertical-align: 50px;
}


Ca me donne ceci
upload/1551378261-74656-onapproche.png
Le soucis c'est que le texte n'est pas centré, et mes différents test avec vertical align ne donne rien ><.
La meilleur solution que j'ai trouvé, rapidement, c'est celle ci :

.map .tooltip {
    opacity: 1 !important;
    position: absolute;
    border-radius: 5px;
    color: #FFF;
    background: url(https://image.noelshack.com/fichiers/2019/09/5/1551432043-test2.png) scroll 0 0 transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 45px;
    width: 70px;
    z-index: 3;
    text-align: center;
    vertical-align: 50px;
    padding: 26px 0 0 0;
    margin: -36px 0 0 0;
}



Mais c'est pas forcément top ! car je force l'opacity a 1/
Meilleure solution