28172 sujets

CSS et mise en forme, CSS3

Problème pour déplacer infobulle débordante et tronquée

Bonjour,

J'ai suivi ce tuto :
http://www.alsacreations.com/astuce/lire/1-comment-personnaliser-une-infobulle.html
et appliqué à la lettre celui donné à la fin des explications :
http://psacake.com/web/jl.asp
pour chaque cases d'un tableau.

La prochaine étape serait de pouvoir déplacer automatiquement cette info bulle si je suis en bas, ou à droite, ou en bas et à droite du tableau, pour que l'info-bulle reste affichée dans le tableau sans en sortir (affichage au dessus du curseur, ou à gauche du curseur, ou au dessus et à gauche du curseur).

Je ne parle pas vraiment anglais et je n'ai pas dû employer les bons termes pour trouver quelque chose sur google.

Auriez vous un lien, un tuto, des infos à me communiquer ?

Merci


PS : en résumé le tuto explique l'utilisation de :

<html>
<head>
<style>

a.info{
    position:relative; /*this is the key*/
    background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}

</style>
</head>
<body>
<a href="#" class="info">le texte<span>le texte de l'info bulle</span></a>
</body>
Si j'ai bien compris,

Si tu met l'infobulle au dessus et a gauche du curseur, tu auras le même problème pour les élément en haut et a gauche de ton tableau.


Sinon tu peux t'orienter vers le Jquery, et Qtip2:

Voici une demo http://craigsworks.com/projects/qtip2/demos/#viewport

tu peux essayer de configurer ta toolbox pour la mettre ou tu veux par rapport à l'élément.

Pour en comprendre le fonctionnement tu à un bouton en haut a droite avec "VIEW SOURCE".

Bonne chance.

Martial
Ouiiiiiii ! Martic tu as tout compris !

La soluce serait plus du style :
http://craigsworks.com/projects/qtip2/demos/#mouse
Leur démo fonctionne dans Chrome et IE mais pas dans FireFox ou Opéra ? Je n'ai pas testé avec Safari.

Le view source n'explique pas grand chose, il va me falloir appronfondir

Maintenant il me reste à comprendre comment ça fonctionne, à me documenter sur le Jquery et découvrir ce qu'est Qtip2.
Avant d'installer des ko pour juste une "fonction" j'essaye de comprendre et de le faire par moi-même. Ce n'est peut-être pas optimisé du premier coup, mais il y a la satisfaction d'avoir compris et d'y être parvenu.
Ensuite les conseils sont toujours les bienvenus pour améliorer ou perfectionner le code.

Pour l'instant j'ai quelque chose qui tourne bien, pas rond mais ovale (petit soucis non permanent tout en bas ou tout à droite).
Dans mon code il y a un onmousemouve="function(event);" puis dans la fonction des : event.clientX, event.clientY, offsetLeft, offsetTop, offsetParent, offsetWidth, offsetHeight, quelques calculs basiques et puis c'est tout.

Je ne sais si j'aurai le temps de nettoyer et commenter mon code avant de partir en vacances, mais je le posterai prochainement.
Ne serait-ce pour avoir des avis éclairés des pros du javascript. Smiley biggrin
Ah zut ! J'ai oublié : à mon grand regret c'est tout en javascript, il n'y a plus rien du tuto initial où tout était dans le style, dommage !
Sujet clos
Aller à