Question

我创建了一些可以使用JQuery更改的工具提示，并多次检查我的代码。我发现CSS中的代码已被破坏，因为宽度不正确。您可以找到演示here或只是在下面查看

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：我有一些工具提示无法正常工作。他们尝试使用整个宽度而不是出现在原始元素附近，而是出现在整个页面或中间。我试图让工具提示做他们应该做的事情 - 在他们被束缚的元素旁边并在徘徊时解释它，而不是从屏幕中间解释它。

Answer 1

<p>不是内联元素。请注意Bootstrap documentation for Tooltips他们仅将<a>和<button>元素与其一起使用。您可以执行以下操作以使其正常工作：

<p id="intro">
    <span title = "test" data-toggle = "tooltip" data-placement = "right">
      Hello!!!
    </span>
</p>

Bootstrap工具提示基于全宽度离开页面

1 个答案: