自定义工具提示 CSS 样式的数据绑定干扰

Question

我正在尝试创建一个工具提示弹出窗口，当我将鼠标悬停在屏幕上的元素上时会出现该弹出窗口。我正在使用带有挖空的类型脚本作为我的java脚本代码和cshtml。到目前为止，我得出的结论是data-bind="text： Value">干扰了class="tooltipcustom"。

这是W3schools上以下样式的工作版本。这里 如果我将静态值放入工具提示自定义范围中，它可以完美运行，但当我使其成为数据绑定值时则不然。

我进行了广泛的研究，只找到了一个似乎可行的答案。 他们建议为工具提示添加自定义绑定，但在项目当前情况下我无法做到这一点。

<style>
.tooltipcustom {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltipcustom .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltipcustom .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltipcustom:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>

此 Div 循环遍历代码列表，每个代码都有一个字段列表。 每个字段都有自己的工具提示，您可以将鼠标悬停在上面，从而提供有关该字段的信息。 输出如下所示，每个单独的数据字段都有自己的工具提示。

35B A 0000000000 00 001 02 BI 250-500 0000210 0000000 35B A 0000000000 00 001 03 PD 50 0000310 0000000 35B A 000000000 00001 04 UMB 250-500 0000008 0000000

<div data-bind="foreach: segmentCodes">
<div data-bind="foreach: fields">
<span class="tooltipcustom" data-bind="text: Value">
<span class="tooltiptext">test</span>
</span>
</div>

Answer 1

这里的诀窍是使用容器较少绑定

<!-- ko text: value --><!-- /ko -->

停止覆盖内部 HTML

var ViewModel = {
segmentCodes: [{
fields: [{
value: 'some value',
tooltip: 'some value tooltip'
}, {
value: 'some value 22',
tooltip: 'some value 22 tooltip'
}]
},
{
fields: [{
value: 'other value',
tooltip: 'other value tooltip'
}]
}
]
};
ko.applyBindings(ViewModel);

.tooltipcustom {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltipcustom .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltipcustom .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltipcustom:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.main {
margin: 50px;
}
.main span {
margin: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="main" data-bind="foreach: segmentCodes">
<div data-bind="foreach: fields">
<span class="tooltipcustom">
<!-- ko text: value --><!-- /ko -->
<span class="tooltiptext" data-bind="text: tooltip"></span>
</span>
</div>
</div>