<a href="#" id="news" class="btn">News</a>

<div style="display:none" class="alert_list">
  <ul class="unstyled">
    <li data-alert_id="1" class="alert_li"><a href="#" class="alert_message">Messaggio di notifica un po più lungo del normale</a> <br /><a href="#" class="turn_off_alert">turn off</a><div class="clearfix"></div></li>
    <li data-alert_id="2" class="alert_li"><a href="#">Messaggio di notifica 2 un po più lungo del normale</a> <br /><a href="#" class="turn_off_alert">turn off</a><div class="clearfix"></div></li>
    <li data-alert_id="3" class="alert_li"><a href="#">Messaggio di notifica un po più lungo del normale</a> <br /><a href="#" class="turn_off_alert">turn off</a><div class="clearfix"></div></li>
  </ul>
</div>
#news{margin : 10px 0px 0px 150px}
.alert_list{font-size: 11px; color:grey}
li.alert_li {
  font-size: 11px; 
  color:grey;
  padding:10px 0px 2px 0px;
  border-bottom: thin solid #c0c0c0;
}
li.alert_li:hover{background-color:#eee}
.turn_off_alert{float:right;margin-bottom :1px}
a.alert_message{color : grey}
a.alert_message:hover{color : grey}





$("#news").popover({
  'title' : 'Notifiche', 
  'html' : true,
  'placement' : 'bottom',
  'content' : $(".alert_list").html()
});

$('.turn_off_alert').live('click', function(event){
  var alert = $(this).parent();
  var alert_id = alert.data("alert_id");
  alert.hide("fast");
  
});
Run Pen

External CSS

  1. https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js