Question

我尝试在此处遵循示例和文档： https://getbootstrap.com/docs/4.0/components/tooltips/

在这里： https://getbootstrap.com/docs/4.0/getting-started/introduction/

将鼠标悬停在按钮上时，我希望工具提示出现在按钮上方。而是显示在按钮下方。有什么事吗这是我的HTML代码：

<!doctype html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<head>
</head>
<body>
This is some text.<br /><br /><br />
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>    </head>
</body>
</html>

Answer 1

您必须启用工具提示组件。不能仅通过包含character来启用它。您仍然需要通过JavaScript调用它，例如：

df <- structure(list(a = c(1L, 1L, 1L, 2L, 2L, 2L, 3L, 3L, 3L), step_num = c(1L, 
2L, 3L, 1L, 2L, 3L, 1L, 2L, 3L), duration = c(5L, 4L, 1L, 7L, 
2L, 9L, 1L, 1L, 3L)), class = "data.frame", row.names = c(NA, 
-9L))

在上面的示例中包含该代码后，您将获得预期的结果。您将看到的工具提示将是浏览器中生成的任何内容。在Google Chrome和Firefox中，默认行为似乎是将工具提示放在按钮下方，尽管在Safari中，默认情况下似乎在上方。

data-toggle

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});

Bootstrap工具提示，忽略“数据放置”属性

1 个答案: