我正在尝试制作一个具有更大宽度的工具提示。
这就是我所拥有的。
的HTML
<div class="container hidden-sm hidden-xs">
<hr>
<ul class="nav nav-pills dropup">
<li class="pull-left"><a href="https://www.facebook.com/Sander0542/" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li class="pull-left"><a href="https://twitter.com/Sander0542/" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li class="pull-left"><a href="https://www.instagram.com/sander0542/" target="_blank"><i class="fa fa-instagram"></i></a></li>
<li class="pull-left"><a href="https://www.snapchat.com/add/Sander0542/" target="_blank"><i class="fa fa-snapchat-ghost"></i></a></li>
<li class="pull-left"><a href="https://plus.google.com/u/0/+SanderJochems0542" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li class="pull-left"><a href="https://www.youtube.com/channel/UCDn9R9Rclc0KVkft_0FewMA" target="_blank"><i class="fa fa-youtube-play"></i></a></li>
<li class="pull-right"><a href="/contact"><?php echo $footer["contact"]; ?></a></li>
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">© Sander Jochems <?php echo date("Y"); ?></a>
<ul class="dropdown-menu">
<li><a href="/sitemap"><?php echo $footer[sitemap]; ?></a></li>
<li><a href="/privacy"><?php echo $footer[privacy_policy]; ?></a></li>
</ul>
</li>
<li class="pull-right"><a href="#" data-toggle="modal" data-target="#language"><?php echo $footer["language"]; ?></a></li>
<li class="pull-right"><a><i class="fa fa-tachometer fa-fw" data-toggle="tooltip" title="<?php echo $footer["visitor"]; echo $total_hits; ?>"></i></a></li>
</ul><br>
jQuery的
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
CSS:
.tooltip-inner {
min-width: 100px;
max-width: 100%;
}
这样,宽度将不会更大。
只需将工具提示的默认最大宽度改写为所需的值即可。
$('[data-toggle="tooltip"]').tooltip();
.tooltip-inner {
max-width: 150px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<br />
<br />
<li class="pull-right"><a><i class="fa fa-tachometer fa-fw" data-toggle="tooltip" data-placement="left" title="I'am trying to make a tooltip with a bigger width."></i></a></li>
注意:如果包含的元素小于您的max-width,则max-width将不起作用。
在这种情况下,您需要通过添加以下内容将工具提示附加到正文:
data-container="body"
希望对您有所帮助。。谢谢
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句