问题描述
包含以下 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