В заметке всплывающей подсказки к сетевому узлу - PullRequest
Новая
       43

В заметке всплывающей подсказки к сетевому узлу

0 голосов
/ 27 марта 2020

Я добавил поле заголовка для узла. Согласно документации vis.js она должна отображать всплывающую подсказку при наведении на узел.

Я вижу vis-tooltip div в элементе inspect. Но его видимость скрыта. В примере документа vis.js я увидел всплывающее окно. css файл, применяемый к классу vis-tooltip. Но я не вижу его в моем приложении

У меня есть следующие свойства для узлов в опциях. Нужно ли что-нибудь добавить? 

 nodes: {
        title: 'hover',
        shape: 'dot',
        chosen: true,
        color: {
            highlight: {
              border: '#2B7CE9',
              background: '#fff'
          },
          hover: {
            border: '#2B7CE9',
            background: '#D2E5FF'
          }
        },
        font: {
          size: 9
        },
        borderWidth: 2
      }

пример данных узла 

{id: 9264, type: "db", title: "node-text", resource: "dascsvd", region: "xxxxx"}

1 Ответ

0 голосов
/ 03 апреля 2020

Для vis-tooltip класс css должен динамически применяться при наведении курсора. Чего не было в моем случае. Этот css должен был прийти из файла popup.css. Я скопировал эти css и добавил в свой код. Теперь он работает нормально, как ожидалось 

::ng-deep div.vis-tooltip {
  position: absolute;
  visibility: hidden;
  padding: 5px;
  white-space: nowrap;
  color: #000000;
  background-color: #f5f4ed;

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #808074;

  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;

  z-index: 5;
}
...