Tooltip BBCode

[MariePop's]

Description :
Tooltip BBCode permet d'afficher un texte au survol d'un mot clé

Utilisation du BBCode :

Code : Tout sélectionner

[tooltip={TEXT1}]{TEXT2}[/tooltip]

Code HTML de remplacement :

Code : Tout sélectionner

<span title="{TEXT1}">{TEXT2}</span>

Ligne d'aide :

Code : Tout sélectionner

[tooltip=explication du mot]le mot à expliquer[/tooltip]

Exemple :

Lorem Ipsum

Code : Tout sélectionner

[tooltip=Le Lorem Ipsum est un faux texte]Lorem Ipsum[/tooltip]

[pit]

Bonjour.
Je découvre ce BBCode, je n'y connais rien en html mais je vois deux trucs qui me choquent un peu :

• il n'y a rien qui montre que Lorem Ipsum est un mot qui au survol va donner de l'info : faut-il le mettre en gras et/ou souligné soi-même à l'intérieur des crochets ?
• l'explication apparait en dessous du mot alors que je la préfèrerais au-dessus

Lorem Ipsum

[Fred]

Salut Pit

Remplace le code HTML par ceci :

Code : Tout sélectionner

<a class="tooltip" <span title="{TEXT1}">{TEXT2}</span></a>

Et ajoute ce code au fichier CSS de ton style perso :

Code : Tout sélectionner

.tooltip {
            border-bottom: 1px dotted #000000; color: #000000; outline: none;
            cursor: help; text-decoration: none;
            position: relative;
        }
        .tooltip span {
            margin-left: -999em;
            position: absolute;
        }
        .tooltip:hover span {
            border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            font-family: Calibri, Tahoma, Geneva, sans-serif;
            position: absolute; left: 1em; top: 2em; z-index: 99;
            margin-left: 0; width: 250px;
        }

[pit]

Bonjour Fred.
Merci pour le retour et pour le code.

Je suis réticent pour aller modifier un style, d'autant plus que nous avons déjà personnalisé un style de phpbb spain et que nous utilisons aussi (choix de l'utilisateur) le style prosilver --> des choses à penser / faire lors des mises à jour.

Je vais me contenter de le mettre à disposition des seuls modos et admins, charge à eux de mettre le mot en couleur + souligné , le pékin lambda n'y pensera pas et son info bulle risque alors de ne pas être actionnée.

[Fred]

Bonjour Pit

Je reviens tardivement dans cette discussion

Je suis réticent pour aller modifier un style, d'autant plus que nous avons déjà personnalisé un style de phpbb spain

Ici dans ma proposition il s'agit d'ajouter un code CSS à un style hérité de prosilver déjà modifié. Lors des mises à jour les fichiers CSS sont rarement à modifier, surtout si tu as créer un fichier CSS unique pour faire les modifications.