Des bulles d'infos contextuelles à la Adobe CS5 en jQuery et CSS3

Si vous êtes allez jeter un coup d'œil au nouveau site d'Adobe CS5, vous aurez sans doute constaté la nouvelle manière de présenter les fonctionnalités des produits: Des liens ouvrant des bulles d'infos dynamiques avec du contenu riche.

Voici un tutorial permettant de recréer cet effet de "tips contextuels" avec effet de slideout, avec jQuery et du CSS3.

Ce script est issu du très bon site tutorialzine.com.

L'objectif est de créer des liens sur une image, positionnés en absolute, qui nous permettront de présenter de manière plus dynamique et originale les fonctionnalités ou points clés de nos produits / services.

Commençons tout d'abord par la structure HTML:

<div class="main">

    <p title="Intitulé du lien" style="top:200px;left:120px;">
        
        Contenu de notre bulle d'info: Images, vidéos, liens ...
    Ouverture vers le bas droit
    </p>
    
    <p title="Intitulé du lien 2" class="openTop openLeft blue" style="top:400px;left:650px;">
        Contenu de la deuxième bulle. Celle-ci s'ouvrira en direction du coin haut gauche.

    </p>
    
    <p title="Intitulé du lien 3" class="openTop red" style="top:500px;left:90px;">
        Contenu de la 3ème bulle. Ouverture vers le coin haut droit.
    </p>

</div>

Appliquons ensuite, le style aux éléments de la page:

.slideOutTip{
    /* The main wrapping div of the slideout tips */
    position:absolute;
    padding:3px;
    top:0;
    left:0;
    background-color:#111;
    font-size:13px;
    color:white;
    overflow:hidden;
    height:22px;
}

.slideOutTip:hover{
    /* Applying a CSS3 outer glow on hover */
    -moz-box-shadow:0 0 1px #999;
    -webkit-box-shadow:0 0 1px #999;
    box-shadow:0 0 1px #999;
}

/* The holder for the title and the icon: */
.tipVisible{ cursor:pointer; height:22px; }

.tipTitle{
    float:left;
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:15px;
    font-weight:bold;
    white-space:nowrap;
    line-height:22px;
    padding-right:5px;
}

.tipIcon{
    width:20px;
    height:20px;
    float:left;
    background-color:#61b035;
    border:1px solid #70c244;
    margin-right:8px;
    
    /* CSS3 Rounded corners */
    
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    border-radius:1px;
}

/* Three color themes */
.green .tipIcon{ background-color:#61b035; border:1px solid #70c244; }
.blue .tipIcon{ background-color:#1078C7; border:1px solid #1e82cd; }
.red .tipIcon{ background-color:#CD3A12; border:1px solid #da421a; }

.plusIcon{
    /* The plus icon */
    width:13px;
    height:13px;
    background:url('img/plus.gif') no-repeat center center;
    margin:4px;
    
    /* Defining a CSS3 animation. Currently only works in Chrome and Safari */
    -webkit-transition: -webkit-transform 0.2s linear;
    -moz-transition: -moz-transform 0.2s linear;
    transition: transform 0.2s linear;
}

.slideOutTip.isOpened{ z-index:10000; }

.slideOutTip.isOpened .plusIcon{
    /* Applying a CSS3 rotation  to the opened slideouts*/
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

/* Special rules for the left and top - opening versions */

.openLeft .tipIcon{
    /* Floating the title and the icon to the right */
    margin:0 0 0 8px;
    float:right;
}
.openLeft .tipTitle{ float:right; padding:0 0 0 5px; }
.openLeft .slideOutContent{ margin-top:22px; }
.openLeft.openTop .slideOutContent{    margin-top:0; }


.slideOutContent{
    /* Hiding the div with the slide out content: */
    display:none;
    padding:10px;
    font-size:11px;
}

/* Hiding the original paragraphs if they have not been replaced (JS disabled): */

.main > p{ display:none; }

Et pour finir, animons le tout pour obtenir les effets de slideout, dans les directions souhaitées:

$(document).ready(function(){
    /* The code here is executed on page load */
    
    /* Replacing all the paragraphs */
    $('.main p').replaceWith(function(){
    
        /* The style, class and title attributes of the p are copied to the slideout: */
        
        return '
        <div class="slideOutTip '+$(this).attr('class')+'" style="'+$(this).attr('style')+'">
            
            <div class="tipVisible">
                <div class="tipIcon"><div class="plusIcon"></div></div>
                <p class="tipTitle">'+$(this).attr('title')+'</p>
            </div>
            
            <div class="slideOutContent">
                <p>'+$(this).html()+'</p>
            </div>
        </div>';
    });

    $('.slideOutTip').each(function(){

        /*
            Implicitly defining the width of the slideouts according to the width of its title,
            because IE fails to calculate it on its own.
        */
        
        $(this).width(40+$(this).find('.tipTitle').width());
    });
    
    /* Listening for the click event: */
    
    $('.tipVisible').bind('click',function(){
        var tip = $(this).parent();
        
        /* If a open/close animation is in progress, exit the function */
        if(tip.is(':animated'))
            return false;

        if(tip.find('.slideOutContent').css('display') == 'none')
        {
            tip.trigger('slideOut');
        }
        else tip.trigger('slideIn');

    });
    
    $('.slideOutTip').bind('slideOut',function(){

        var tip = $(this);
        var slideOut = tip.find('.slideOutContent');
        
        /* Closing all currently open slideouts: */
        $('.slideOutTip.isOpened').trigger('slideIn');
        
        /* Executed only the first time the slideout is clicked: */
        if(!tip.data('dataIsSet'))
        {
            tip    .data('origWidth',tip.width())
                .data('origHeight',tip.height())
                .data('dataIsSet',true);
            
            if(tip.hasClass('openTop'))
            {
                /*
                    If this slideout opens to the top, instead of the bottom,
                    calculate the distance to the bottom and fix the slideout to it.
                */
                
                tip.css({
                    bottom    : tip.parent().height()-(tip.position().top+tip.outerHeight()),
                    top        : 'auto'
                });
                
                /* Fixing the title to the bottom of the slideout, so it is not slid to the top on open: */
                tip.find('.tipVisible').css({position:'absolute',bottom:3});
                
                /* Moving the content above the title, so it can slide open to the top: */
                tip.find('.slideOutContent').remove().prependTo(tip);
            }
            
            if(tip.hasClass('openLeft'))
            {
                /*
                    If this slideout opens to the left, instead of right, fix it to the
                    right so the left edge can expand without moving the entire div:
                */
                tip.css({
                    right    : Math.abs(tip.parent().outerWidth()-(tip.position().left+tip.outerWidth())),
                    left    : 'auto'
                });
                
                tip.find('.tipVisible').css({position:'absolute',right:3});
            }
        }
        
        /* Resize the slideout to fit the content, which is then faded into view: */
        
        tip.addClass('isOpened').animate({
            width    : Math.max(slideOut.outerWidth(),tip.data('origWidth')),
            height    : slideOut.outerHeight()+tip.data('origHeight')
        },function(){
            slideOut.fadeIn();
        });

    }).bind('slideIn',function(){
        var tip = $(this);

        /* Hide the content and restore the original size of the slideout: */
        
        tip.find('.slideOutContent').fadeOut('fast',function(){
            tip.animate({
                width    : tip.data('origWidth'),
                height    : tip.data('origHeight')
            },function(){
                tip.removeClass('isOpened');
            });
        });

    });
});

Et voilà, nos liens sont prêts à être déroulés avec un bel effet de fadeOut elastique.

Démo

Site Officiel