Grumble.js - Des tooltips en forme de bulle avec positionnement à 360°

Grumble.js est un plugin jQuery permettant de créer des tooltips en forme de bulle sans limitation de positionnement.

A l'aide de ce plugin, vous aurez la possibilité de mettre en place des bulles d'info ou d'aide très rapidement sur vos applications web.

Les bulles ne sont pas comme les tooltips classiques, elles sont rondes et s'adaptent automatiquement au texte qu'elles contiennent.

Il est possible de combiner plusieurs options comme l'angle de positionnement de la bulle (360°), afficher ou non le bouton fermer, durée avant de fermer automatiquement la bulle ...

$('#grumble3').grumble(
    {
        text: 'Click me!',
        angle: 150,
        distance: 3,
        showAfter: 3000,
        hideAfter: false,
        hasHideButton: true,
        buttonHideText: 'Pop!'
    }
);

Vous pourrez pousser encore plus loin vos développement en y associant des fonctions de callback:

$('#myElement').grumble({
    showAfter: 1000,
    hideAfter: 2000,
    onShow: function(){
        console.log('triggered when show animation completes');
    },
    onBeginHide: function(){
        console.log('triggered when hide animation begins');
    },
    onHide: function () { 
        console.log('triggered when hide animation completes');
    }
});

Le plugin utilise les CSS3 Transform avec les navigateurs récents et les Matrix filters pour nos chers Internet Explorer 6+.

Le tout peut bien sûr être personnalisé en CSS à souhait !

Site Officiel