$.fn.synonyms = function(options){

  options = $.extend({}, {separator: '|'}, options);

  this.each(function(elKey, el){

    var $el = $(el),

        originalText = $el.text(),

        originalTextSpan = $('<span>'+originalText+'</span>');

    $el.html(originalTextSpan);

    var suggestionBox = '<div>';

    $.each($el.attr('data-synonyms').split(options.separator),

           function(key, suggestion){

      suggestionBox+='<span>'+suggestion+'</span> - ';

    }

          );

    suggestionBox = suggestionBox.slice(0, -2);

    suggestionBox += '</div>';

    suggestionBox = $(suggestionBox);

    suggestionBox.css({

      display: 'none'

    });

    $el.click(function(){

      suggestionBox.toggle();

    });

    suggestionBox.on('click','span',function(){

      var selectedText = $(this).text();

      originalTextSpan.text('{'+originalText+'|'+selectedText+'}');

      onSelected(selectedText);

    });

    $el.append(suggestionBox);

  });

  function onSelected(selectedText){

    if(options.onSelected){

      options.onSelected(selectedText);

    }

  }

};

​

$(function(){

  $('[data-synonyms]').synonyms({

    onSelected: function(selectedText){

      alert('you selected:'+selectedText);

    }

  });

});