html - Bootstrap 4工具提示位置错误
问题描述
我正在使用 Bootstrap 4 并从 Sass 文件中编译了 CSS 的副本。使用 Ruby Sass 3.7.4
我已经删除了 Sass 的某些部分,但不认为存在对 Tooltips 工作方式有任何影响的依赖项:code
, card
, badge
, jumbotron
, progress
, carousel
.
标记就像这样简单:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
它呈现如下(不正确):
我已经删除了我自己的所有 CSS,所以它实际上是编译后的 Bootstrap 4 CSS。
我还包括bootstrap.bundle.min.js
和jquery-3.2.1.min.js
我不确定为什么会发生这种情况,因为文档https://getbootstrap.com/docs/4.0/components/tooltips/#examples中给出的示例按我的预期工作。
用于初始化工具提示的 js 位于页面加载时出现的 js 文件中:
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
有人对此有任何想法吗?
解决方案
这很好用......可能是,您的 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>
推荐阅读
- c++ - 如何找到我的 Codechef 解决方案中的缺陷
- bootstrap-4 - 图像不在自己的行内
- php - 找不到我复制到不同服务器的工作 Symfony 项目的 Symfony 4 路由
- python - 使用 fastapi 上传文件
- python - 自动为 AutoRegression 模型 statsmodels 选择滞后
- c# - 使用 c# 代码将数字转换为越南语单词
- c# - 简单的程序需要很长时间才能完成
- scala - 如何运行自定义 docker 镜像 testContainer
- xcode - 将目标添加到 iOS/macOS 多平台项目 (Xcode 12)
- c# - 如何使用 C# 在 mongodb 中插入许多() JSON 数组