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

Question

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

这是 W3schools 上以下样式的工作版本。 Here 如果我将静态值放入 tooltipcustom 跨度中，它可以完美运行，但当我将其设为数据绑定值时却无法正常运行。

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

<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 0000000000 00 001 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

这里的技巧是使用容器较少的绑定

停止覆盖内部 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>

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

data-bind interference with custom tooltip CSS style

html

javascript

razor

knockout.js

typescript