我创建了一些可以使用JQuery更改的工具提示，并检查了我的代码好几次。我发现CSS中的代码被破坏了，因为宽度不正确。你可以在这里找到演示，也可以在下面查看
HTML
<body id = "body" style = "background:rgb(9,9,9)" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<p id = "intro" title = "test" data-toggle = "tooltip" data-placement = "right">Hello!!!</p>
<br/>
<br/>
<p id = "choice1" data-toggle = "tooltip">Herp a derp</p>
<script>
</script></body>
没有CSS，唯一的JQuery就是启用工具提示
RECAP:我有一些工具提示无法正常工作。它们不是显示在原始元素附近，而是尝试使用全宽并显示在整个页面或在中间。我正试图让工具提示做它们应该做的事情——在它们所连接的元素旁边，悬停时进行解释，而不是在屏幕中间进行解释。
<p>不是内联元素。请注意，在Tooltips的Bootstrap文档中，他们只将其与<a>和<button>元素一起使用。您可以执行以下操作使其工作：
<p id="intro">
<span title = "test" data-toggle = "tooltip" data-placement = "right">
Hello!!!
</span>
</p>