вмешательство в привязку данных с помощью пользовательского стиля подсказки CSS - PullRequest
Новая
       14

вмешательство в привязку данных с помощью пользовательского стиля подсказки CSS

0 голосов
/ 28 июня 2018

Я пытаюсь создать всплывающую подсказку, которая будет появляться, когда я наведу курсор мыши на элемент на экране. Я использую скрипт типа с нокаутом для моего кода скрипта Java и cshtml. на данный момент я пришел к выводу, что data-bind = "text: Value" мешает class = "tooltipcustom" .

вот рабочая версия стиля ниже на W3schools. Здесь Если я помещаю статическое значение в настраиваемый диапазон tooltip, он работает отлично, но не тогда, когда я делаю его привязанным к данным.

Я много занимался исследованиями и нашел только один ответ, который, похоже, может сработать. они предложили добавить пользовательскую привязку для всплывающей подсказки, но я не могу этого сделать в текущей ситуации проекта. 

<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>

1 Ответ

0 голосов
/ 28 июня 2018

хитрость в том, чтобы использовать контейнер без привязки

<!-- 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>
...