tooltips su map image

[metatad]

Ho un semplice tooltip in CSS (vedi code sotto):

.hint, [data-hint] {
 position: relative;
 display: inline-block;
}
.hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
	position: absolute;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	visibility: hidden;
	opacity: 0;
	z-index: 1000000;
	pointer-events: none;
	-webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	transition: 0.3s ease;
}
.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
	visibility: visible;
	opacity: 1;
}
.hint:before, [data-hint]:before {
	content: '';
	/*position: absolute;*/
	background: transparent;
	border: 6px solid transparent;
	z-index: 1000001;
}
.hint:after, [data-hint]:after {
	content: attr(data-hint);
	background: #1430e6;
	color: white;
	text-shadow: 0 -1px 0px black;
	padding: 8px 10px;
	font-size: 12px;
	line-height: 12px;
	white-space: nowrap;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
.hint--top:before {
	border-top-color: #1430e6;
}
.hint--bottom:before {
	border-bottom-color: #1430e6;
}
.hint--left:before {
	border-left-color: #1430e6;
}
.hint--right:before {
	border-right-color: #1430e6;
}
.hint--top:before {
	margin-bottom: -12px;
}
.hint--top:after {
	margin-left: -18px;
}
.hint--top:before, .hint--top:after {
	bottom: 100%;
	left: 50%;
}
.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {
	-webkit-transform: translateY(-8px);
	-moz-transform: translateY(-8px);
	transform: translateY(-8px);
}
.hint--bottom:before {
	margin-top: -12px;
}
.hint--bottom:after {
	margin-left: -18px;
}
.hint--bottom:before, .hint--bottom:after {
	top: 100%;
	left: 50%;
}
.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before {
	-webkit-transform: translateY(8px);
	-moz-transform: translateY(8px);
	transform: translateY(8px);
}
.hint--rounded:after {
	border-radius: 4px;
}
.hint--bounce:before, .hint--bounce:after {
	-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
}

Il mio problema è che i tooltips mi serve che appaiano ìn corrispondenza di alcune aree mappate di un'immagine, a sua volta contenuta in un div con posizionamento relative. Applicando il codice riportato, però, i tooltips appaiono sempre posizionati nell'angolo in basso a sx del div che contiene l'immagine, e non riesco a posizionarli in relazione all'area mappata.
Suggerimenti?

[Nobody33]

Come funziona questo tooltip "semplice" ? Come lo ancori all'immagine?

Nota: potresti semplificare il codice riscrivendolo. Cerca in rete, ne troverai alcuni esempi interessanti scritti con 2 righe.

[metatad]

L'ancoraggio avviene come deve (vedi codice sotto), e di script ne ho provati svariati, anche di più semplici, ma mi danno tutti lo stesso problema di posizionamento del tooltip...

<div id="back">
[img]assets/img/worldmapsmall.jpg[/img]
  <map name="Map">
    <area shape="circle" coords="823,175,41" href="#" alt="ASIA" id="showAs" onFocus="this.blur()" data-hint="Asia's tour" class="hint--bottom">
    <area shape="circle" coords="988,265,40" href="#" alt="TASTE" id="showTaste" onFocus="this.blur()" data-hint="What's Taste" class="hint--bottom">
    <area shape="circle" coords="572,270,43" href="#" alt="AFRICA" id="showAf" onFocus="this.blur()" class="hint--top" data-hint="Africa's tour">
    <area shape="circle" coords="187,285,43" href="#" alt="AMERICA" id="showAm" onFocus="this.blur()" class="hint--top" data-hint="America's tour">
    <area shape="circle" coords="782,362,41" href="#" alt="SIGHT" id="showSight" onFocus="this.blur()" class="hint--top" data-hint="What's Sight">
    <area shape="circle" coords="466,400,41" href="#" alt="SMELL" id="showSmell" onFocus="this.blur()" class="hint--top" data-hint="What's Smell">
    <area shape="circle" coords="180,463,41" href="#" alt="HEARING" id="showHear" onFocus="this.blur()" class="hint--top" data-hint="What's Hearing">
    <area shape="circle" coords="995,449,41" href="#" alt="AUSTRALIA" id="showAu" onFocus="this.blur()" class="hint--top" data-hint="Australia's tour">
    <area shape="circle" coords="372,162,42" href="#" alt="TOUCH" id="showTouch" onFocus="this.blur()" class="hint--top" data-hint="What's Touch">
    <area shape="circle" coords="541,115,41" href="#" alt="EUROPE" id="showEu" onFocus="this.blur()" class="hint--top" data-hint="Europe's tour">
  </map>
</div>

[Nobody33]

QUI

Se usi un altra libreria jquery di quella presente nell'esempio, invece di .bind scrivi .on; dipende quale usi.

[metatad]

thanx!