• Balloon.build(), qui crée les éléments DOM qui vont bien ;
  
• Balloon.setContent(), qui permet de créer/changer le contenu de la bulle ;
  
• Balloon.attachToCharacter(character_id), qui prend l'id d'un personnage, le trouve dans le DOM, récupère ses offsets et calcule ceux de la pub en la décalant comme tu le souhaite ;
  
• Balloon.show(), qui affiche effectivement la bulle, tu peux y mettre un effet d'apparition amusante, genre qui tombe du haut de la fenêtre, qui apparaît progressivement, etc.
  

/**

 * BalloonFactory va instancier des objets Balloon.

 * On l'utilise afin de conserver l'information des

 * bulles instanciées (pour qu'elles aient un 

 * identifiant unique). On a un tableau des bulles

 * instanciées (ça peut servir pour une méthode

 * qui les masque toutes, par exemple).

 */

var BalloonFactory = function(){

  // console.log('Power Rangers, instanciation !');

  this.last_generated_id = 0;

  this.ballons = [ ];

  

  this.create = function(){

    var ballon = new Balloon(this.last_generated_id++);

    this.ballons.push(ballon);

    return ballon

  };  

}

var Balloon = function(id){

  // console.log('Power Rangers, instanciation !');

  this.id             = id;

  this.opacity        = 'half';

  this.DomElement     = null;

  this.isReadyToShow  = false;

};



Balloon.prototype.build = function(){

  this.DomElement = $('<div />')

    .attr('id', this.id)

    .addClass('balloon')

    .css({

      background  : '#fff',

      border      : '1px solid #ccc',

      padding     : '5px',

      position    : 'absolute'

    })

  ;

  

  // Pour la classe !

  this.DomElement.css({

    '-moz-border-radius'                : '15px',

    '-moz-border-radius-bottomleft'     : '2px',

    '-webkit-border-radius'             : '15px',

    '-webkit-border-bottom-left-radius' : '2px',

  });

  

  /**

   * Bien sûr, tous ces styles peuvent (et doivent ?)

   * êtres définis dans une feuille de style !

   */

   

};



Balloon.prototype.setContent = function(content){

  this.DomElement.text(content);

};



Balloon.prototype.attachTo = function(character_id){

  var characterElement = $('#character_' + character_id)[0];

  

  if(characterElement != undefined){

    var CharacterElementOffset = $(characterElement).offset();

    this.DomElement.css({

      left  : (CharacterElementOffset.left + 10) + 'px',

      top   : (CharacterElementOffset.top - 35) + 'px'

    });

    

    this.isReadyToShow = true;

  }

};



Balloon.prototype.show = function(){

  if(this.isReadyToShow){

    $('body').append(this.DomElement);

  }

};

$(document).ready(function(){

  var balloonFactory = new BalloonFactory();

  var ballon_a = balloonFactory.create();

  var ballon_b = balloonFactory.create();

  var ballon_c = balloonFactory.create();



  ballon_a.build();

  ballon_a.setContent("Moi j'aime le jambon !");

  ballon_a.attachTo(3);

  ballon_a.show();



  ballon_b.build();

  ballon_b.attachTo(8);

  ballon_b.setContent("Moi j'aime le pâté !");

  ballon_b.show();



  ballon_c.build();

  ballon_c.attachTo(2);

  ballon_c.setContent("Ben… Moi non.");

  ballon_c.show();

});

<div id="character_3" style="background: blue;"></div>

<div id="character_8" style="background: red;"></div>

<div id="character_2" style="background: green;"></div>