首页 > 代码库 > bootstrap- tooltip

bootstrap- tooltip

2024-08-21 20:17:41   222人阅读

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>

 

bootstrap- tooltip


联系
我们