Infobulle récalcitrante sur SAFARI

Bonjour,

Sur un de mes sites j'ai mis en place des infobulles en utilisant les codes suivants :

<span class="infobulle">texte d'appel de l'infobulle<span class="infobulle-hidden">Texte dans l'infobulle</span></span>

.infobulle{
	position: relative;
	cursor: help;
}
.infobulle .infobulle-hidden {
	position: absolute;
	display: none;
	top: 25px;
	left: -40px;
	width: 250px;
}
.infobulle:hover .infobulle-hidden {
	display: block;
}

Ces infobulles fonctionnent tout à fait correctement sur un certain nombre de navigateur sauf sur SAFARI. Le CSS est certainement en cause (display ?) mais je n'ai rien trouvé sur le web.

Merci pour votre aide
Cordialement
Patrick MARA

Bonjour,

S'il s'agit du safari de l'ipad (ou l'iphone), forcément, c'est délicat puisque le :hover n'existe pas vraiment. Dans un certain nombre de cas, l'ipad va produire l'effet :hover quand on cliquera sur l'objet, et dans d'autres cas, il ne fera rien.

Ici, il est possible que l'ipad ne fasse rien parce que le <span> n'a aucune action à faire sur un clic de souris ou un touch sur l'écran (n'est pas un élément de formulaire, n'a pas d'action à exécuter sur à un évènement, ...). Si tu modifies ton span en ...

<span ontouchstart="" class="infobulle">...</span>

... alors l'action prévue dans le css pour les :hover sera exécutée lors d'un touch sur un écran tactile du fait de la présence du ontouchstart="". C'est de la bricole, y a peut-être mieux.

Amicalement,