工具提示位于<i></i>
图标,但样式很丑。
我想要像这张图片中的那样(默认Bootstrap)
<script>
$( document ).ready(function() {
$('.mark-read-button').tooltip();
});
</script>
<i data-toggle="tooltip" data-placement="top" title="Tooltip on top" class="fa fa-circle mark-read-button"></i>
最佳答案
尝试使用此代码,它使用 CDN 和大屏幕来阻止工具提示离开屏幕。
<!-- CDNs -->
<!-- JQuery -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Jumbotron is to stop the tooltip from going off of the screen. -->
<div class="jumbotron">
<i data-toggle="tooltip" data-placement="top" title="Tooltip on top" class="fa fa-circle mark-read-button"></i>
</div>
<!-- The script cannot be inside another document -->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
关于javascript - Bootstrap 工具提示不是默认的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25436093/