如何解决Bootstrap 4 html tooltip in bootstrap table angular 8 for loop
包含以下 CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
表格代码:
<table class="table table-bordered">
<thead *ngIf="serchResults">
<tr>
<th scope="col">Description</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of serchResults">
<td data-container="body" data-toggle="tooltip" data-html="true" title="<p>Mapped to: </p> <p>Abcd data </p> <p> Test data </p><p> Test data two </p><p> Test data 3</p>">
{{item.title}}
</td>
<td><input type="checkBox" id="{{item.code}}" name="{{item.code}}" value="{{item.code}}"></td>
</tr>
</tbody>
</table>
查询:
<script>
$(function() {
$('[data-toggle="tooltip"]').tooltip({
html: true,});
});
</script>
请看下面的截图。 HTML 工具提示不起作用。
工具提示 HTML 没有在表格和 for 循环内正确显示。也将 CSS 应用于“内部工具提示”在 for 循环和没有 for 循环的情况下都不起作用。
解决方法
首先,避免使用jquery,你可以使用ngx-bootstrap。
不过,要解决此问题,您可能需要在设置 searchResults 后运行以下脚本。原因是,ngFor 仅在获得要迭代的对象后才创建 DOM。一旦 serachResults 对象可用,您就需要运行。
Starting ChromeDriver 89.0.4389.23 (61b08ee2c50024bab004e48d2b1b083cdbdac579-refs/branch-heads/4389@{#294}) on port 10578
Only local connections are allowed.
Please see https://chromedriver.chromium.org/security-considerations for suggestions on keeping ChromeDriver safe.
ChromeDriver was started successfully.
[1617949244.583][WARNING]: Timed out connecting to Chrome,retrying...
Apr 09,2021 11:50:53 AM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: W3C
Apr 09,2021 11:50:55 AM org.openqa.selenium.devtools.CdpVersionFinder findNearestMatch
INFO: Found exact CDP implementation for version 89
Name
selenium-server-4.0.0-beta-2
,
找到了解决方案。很简单。
name
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。