Ho un semplice tooltip in CSS (vedi code sotto):
codice:
.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?