Prueba pop over

by Christian Unigarro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

                <button class="btn btn-danger boton-popover" data-container=".wrapper-popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?" data-placement="bottom">
                 <i class="fa fa-eye"></i>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, aut voluptatum doloribus odio possimus distinctio tempora accusantium blanditiis. Quaerat tempora, hic sapiente non! Animi saepe asperiores quam corporis, quidem voluptatum.
                </button>
                <div class="wrapper-popover"></div>

CSS

@import url(https://fonts.googleapis.com/css?family=Kreon);

.wrapper-popover .popover .popover-title {
  font-family: 'Kreon', serif;
  font-size: 20px;
}

.boton-popover {
  white-space: normal;
}

JavaScript

$(document).ready(function () {
    $('.boton-popover').popover();
});