放置在 <script> 标签内元素上的工具提示与放置在 <body> 中常规 html 元素上的工具提示看起来不同

Question

我需要在 html 页面的各种元素上显示工具提示。元素在标签内并且已在标签内声明当我使用 data-toggle="tooltip" 在两个元素上显示工具提示时，工具提示显示时带有指定的标题，但工具提示显示在像白色背景一样的普通框中，而工具提示显示为默认工具提示。我试过 data-container="body" 但没有用。我在做什么enter image description here错了？

Answer 1

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Add All the recommended js and css files</a>

欢迎使用 SO 添加所有推荐的 js 和 CSS 文件伴侣...

放置在 <script> 标签内元素上的工具提示与放置在 <body> 中常规 html 元素上的工具提示看起来不同

Tooltip placed on elements inside <script> tag looks different compared to tooltip placed on regular html elements in <body>

html

javascript

css

tooltip