<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h3>Tooltip Example</h3> <p>Tooltips are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the tooltip() method.</p> <a href="#" data-toggle="tooltip">Hover over me</a> <h3>Tooltip Example</h3> <p>Tooltips are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the tooltip() method.</p> <a href="#" data-toggle="tooltip">Hover over me</a> </div>

/*Change the size here*/ div.tooltip-inner { max-width: 400px; }

$(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip({ title: "<iframe src='https://cdn.mozilla.net/pdfjs/tracemonkey.pdf' style='width:300px;height:400px;'></iframe>", html: true, placement: "right" }); });