Fichier de tests du plugin content HTML – Balloon

see the balloon.md source code

1. Exemple

Ce plugin de type content html va remplacer les attributs title="un texte" qui se trouve dans le HTML de la note pour utiliser [balloon] qui est une librairie css permettant d’afficher les informations avec un rendu plus sympathique.

Ce plugin est le parfait compagnon du plugin abbreviation puisque c’est justement ce dernier qui injecte des abbréviations sous la forme de tooltip.

2. En images

Ci-dessous, ce à quoi ressemble, par défaut et sous Chrome, une bulle d’aide. Le rendu est celui du navigateur.

La bulle d’aide s’affiche sans trop de mise en forme et peut être fort longue; tellement longue qu’elle peut sortir de l’écran.

Plugin balloon non actif

Ci-dessous la même bulle d’aide mais avec le plugin Balloon actif.

C’est tout de suite nettement plus agréable.

Plugin balloon activé

3. Paramétrage

{
    "plugins": {
        "options": {
            "content": {
                "html": {
                    "balloon": {
                        "attributes": "data-balloon-length=\"xlarge\" style=\"    text-decoration:underline dotted;\" data-balloon-pos=\"up\""
                    }
                }
            }
        }
    }
}

4. Librairie

Balloon est un plugin implémentant la librairie Balloon.css de Claudio Holanda