标签：web ogg this install tom inf remote color desc
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=create-custom-template-for-tooltips 设置自定义样式，宽度不会修改 %li{:"data-option" => style.name, :"data-toggle" => "tooltip", :"data-placement" => "left", :title => style.describe} .style-describe-tip{ border: 1px solid #337ab7; background: white; } .style-describe-tip .tooltip-inner{ background: white; padding: 10px 5px; font-size: 13px; color: black; line-height: 2; text-align: justify; text-indent: 20px; } $(".structure-btn-select ul li").tooltip({ template : ‘<div class="tooltip style-describe-tip"><div class="tooltip-arrow"></div><div class="tooltip-head"></div><div class="tooltip-inner"></div></div>‘, container : ‘.structures-border‘ 设置在哪个里面显示，tip会被插入到其中的最后一个节点 }); <script type="text/javascript"> $(document).ready(function(){ $("#myTooltips a").tooltip({ template : ‘<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-head"><h3><span class="glyphicon glyphicon-info-sign"></span> Tool Info</h3></div><div class="tooltip-inner"></div></div>‘ }); }); </script> <style type="text/css"> .bs-example{ margin: 200px 100px; } .bs-example a{ margin: 25px; font-size: 20px; } /* Styles for custom tooltip template */ .tooltip-head{ color: #fff; background: #000; padding: 10px 10px 5px; border-radius: 4px 4px 0 0; text-align: center; margin-bottom: -2px; /* Hide default tooltip rounded corner from top */ } .tooltip-head .glyphicon{ font-size: 22px; vertical-align: bottom; } .tooltip-head h3{ margin: 0; font-size: 18px; } </style> </head> <body> <div class="bs-example"> <div id="myTooltips"> <a href="#" data-toggle="tooltip" title="Open this document for editing in a text editor."><span class="glyphicon glyphicon-edit"></span></a> <a href="#" data-toggle="tooltip" title="Save this document on the remote web server on a permanent basis."><span class="glyphicon glyphicon-floppy-disk"></span></a> <a href="#" data-toggle="tooltip" title="Download this document from the remote server."><span class="glyphicon glyphicon-download-alt"></span></a> <a href="#" data-toggle="tooltip" title="Print this document using a printer installed on your machine."><span class="glyphicon glyphicon-print"></span></a> <a href="#" data-toggle="tooltip" title="Delete this document permanently."><span class="glyphicon glyphicon-trash"></span></a> <a href="#" data-toggle="tooltip" title="Document Settings"><span class="glyphicon glyphicon-cog"></span></a> </div> </div> </body> </html>
标签：web ogg this install tom inf remote color desc
原文地址：http://www.cnblogs.com/znsongshu/p/6079299.html
