28172 sujets

CSS et mise en forme, CSS3

Infobulle css hover : aussi en clic, comment faire

Bonjour,

J'ai un code infobulle en css.
Il fonctionne +/- bien mais il faudrait que je le rend utilisable sur tablettes et mobile. Donc faire apparaitre/disparaitre le span sur un clic. Pourrie vous m'indiquer la bonne marche à suivre ?

nb : j'ai pas beaucoup de notion de css

Bonne jorunée

<style type="text/css">
<!--

abbr.infobulle {
   position: relative;
   color: black;
   text-decoration: none;
   cursor:help;
}

abbr:focus {font-size:2em;}

abbr.infobulle span {
   display: none; /* On masque l'infobulle. */
}

abbr.infobulle:hover {
	background: none; /* Correction d'un bug d'Internet Explorer. */
	z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
}

abbr.infobulle:hover span {
   display		: inline; /* On affiche l'infobulle. */
   position		: absolute;
   width 		: 400px;

  /* white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

   top			: -5px; /* On positionne notre infobulle. */
   left			: 10px;

   background	: white;

   color		: green;
   padding		: 3px;
   

   border		: 1px solid green;
   border-left	: 4px solid green;
}
</style>



<abbr class="infobulle"">??<span>Description technique.</span></abbr>
Bonjour,

peut-être du côté des pseudo-classes (:active), mais trop limité pour ce que tu veux faire, je crois.

sinon, le onclick en JavaScript fait très bien l'affaire.
Modifié par FloydinBremen (03 Jun 2012 - 18:36)
javais juste oublié de dire merci.
Je m'en occuperai dès que j'aurai un gros temps à y consacrer.
Je met ça de coté pour ne pas oublier.
Merci
Bonjour,

Je m'incruste, juste le temps d'une question :

Une infobulle entièrement en CSS... Ça marche sur tous les navigateurs ?
Ou c'est limité aux plus récents ?

Merci

@+
avec JavaScript ça marche presque depuis toujours, en CSS, tout dépend de la technique choisis en css et/ou HTML et des navigateurs ciblés. :hover et :focus seuls n’étant apparemment pas adapté a l'Ipad , JavaScript semble vouloir encore d’imposer.

++
Modifié par gc-nomade (18 Jun 2012 - 15:50)
Salut, voici une solution basique en javascript afin de visualiser une infobulle sur un clic !
J'espère que cela correspond à ton problème.
<!doctype html>
<html>
<head>
<title></title>

<script type="text/javascript">
function hide(that)	{	that.style.display = "none";	}
function show(that)	{	that.style.display = "block";	}

function cliquer(that)
{
	var node = that.querySelector("span");

	if (node.style.display == "none")	show(node);
	else					hide(node);
}

function infobulle()
{
	var node = document.querySelectorAll(".infobulle");
	
	for (var i=0; i<node.length; i++)
	{
			hide(node[ i ].querySelector("span"));

			node[ i ].onclick = function () { cliquer(this); };
	}
}

window.onload = function ()
{
	infobulle();
}
</script>

</style>
</head>

<body>
	<div class="infobulle">aaaaa<span>Description technique 1.</span></div>
	<div class="infobulle">bbbbb<span>Description technique 2.</span></div>
	<div class="infobulle">ccccc<span>Description technique 3.</span></div>
</body>
</html>
Bonjour,

Ce dernier script ne fonctionne pas sur IE6, et sur FF, ça ne s'affiche pas sous forme d'infobulle...

@+
Tu n'avais pas précisé que tu voulais que cela fonctionne sous internet explorer 6.0.
Désolé, mais je ne possède pas sous mon ordi ni MSIE 6.0 et 7.0 !
Je ne développe plus pour ces anciennes versions.

Ta demande concernait le traitement du clic en javascript, ce que j'ai fait.
A toi d'adapter ce script et de gérer la présentation en CSS de l'infobulle.
Bonjour,

Désolé tournikoti, je ne suis pas l'auteur de ce post, peut-être que cela lui conviendra...

Je me suis incrusté dans cette conversation car je viens de tester une bonne cinquantaine de scripts en tout genre sans résultat compatible avec tous les navigateurs...

Je vais poster un sujet séparé, désolé...

@+
Sujet clos
Aller à