我正在使用Bootstrap 4,并已从Sass文件编译了CSS的副本。使用Ruby Sass 3.7.4
我已经删除了Sass的某些部分,但是认为没有依赖关系会影响工具提示的工作方式:code
,card
,badge
,{{ 1}},jumbotron
,progress
。
标记很简单:
carousel
它渲染成这样(不正确):
我已经删除了我自己的所有CSS,因此实际上是经过编译的Bootstrap 4 CSS。
我还包括了 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
和bootstrap.bundle.min.js
我不确定为什么会这样,因为文档https://getbootstrap.com/docs/4.0/components/tooltips/#examples中给出的示例按预期工作。
用于初始化工具提示的js位于页面加载时显示的js文件中:
jquery-3.2.1.min.js
有人对此有任何想法吗?
答案 0 :(得分:0)
我认为这是缺少的CSS属性。使用类似这样的测试:
.tooltip{
display: inline;
position: relative;
}
答案 1 :(得分:0)
这很好... 可能是CSS出了问题。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>