<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 ----------> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <button id="aaa">aaaaa</button> <hr /> <button id="bbb">bbbbb</button> <hr /> <button id="ccc">ccccc</button> <hr /> <button id="ddd">ddddd</button> <hr /> <button id="eee" title="">eeeee</button>

$( function() { $(document).tooltip({ items: "#aaa, #bbb, #ccc, #ddd", position: {my: 'left+15 top', at: 'right top', collision: 'flipfit'}, content: function() { return "<iframe src='https://cdn.mozilla.net/pdfjs/tracemonkey.pdf' width='300px' height='300px'>"; } }); $("#eee").tooltip({ position: {my: 'left+15 top', at: 'right top', collision: 'flipfit'}, content: function() { return "<iframe src='https://cdn.mozilla.net/pdfjs/tracemonkey.pdf' width='300px' height='300px'>"; } }); });