Подсказка как динамический компонент - PullRequest
Новая
       34

Подсказка как динамический компонент

0 голосов
/ 04 февраля 2019

Я хочу добавить всплывающую подсказку к элементу svg, но как компонент, созданный динамически.Я добавляю всплывающую подсказку к элементу, используя TooltipDirective для элемента svg , то есть 

<circle tooltip [hostContainerRef]="chartContainerRef" [hostElement]="">chartElement [data]="d.tooltip"></circle>

TooltipDirective создает синонимы TooltipComponent (в методе onMouseEnter), и с помощью рендерера и ElementRef он устанавливает свою позицию относительно основного элемента (диаграммы svg).Или, по крайней мере, он должен это сделать.Проблема в том, что это не так, и, несмотря на установку позиции TooltipComponent, компонент всегда добавляется в неправильном месте.Подсказка должна находиться рядом с кружком, а не ниже, как показано здесь:

The tooltip ignores the coordinates set with the renderer

Почему компонент динамической подсказки игнорирует параметры стиля, заданные с помощью средства визуализации?Вот полный пример .Идея состоит в том, чтобы добавить всплывающую подсказку как компонент, чтобы попытаться избежать настроек родительского элемента svg overflow: hidden settings.

1 Ответ

0 голосов
/ 04 февраля 2019

tooltip.component.css 

/* Add the following block */
:host {
  display: block;
  position: fixed;
}

.tooltip {
  display: block;
  /* Remove => position: absolute;*/
  font-size: 0.75em;
  background-color: black;
  opacity: 0.8;
  color: white;
  padding: 5px;
  border-style: solid;
  border-color: gray;
  border-width: 1px;
  border-radius: 2px;
}

Рабочий пример

...