Угловой - Добавить подсказку к элементу SVG - PullRequest
Новая
       29

Угловой - Добавить подсказку к элементу SVG

0 голосов
/ 03 октября 2018

На моем веб-сайте есть элемент SVG: 

<ellipse id="svg_2" cy="78.999999" cx="1042.499999" stroke-width="1.5" stroke="#000" fill="#fff"/>

Я хочу добавить всплывающую подсказку к этому элементу.Я пробовал NGPrime и NGX-bootstrap, но подсказка не отображается для этого элемента (она работает, когда я добавляю это в любой другой элемент на моем веб-сайте).

Я работаю с Angular 4 CLI.

Есть идеи, как мне этого добиться?

1 Ответ

0 голосов
/ 28 ноября 2018

У меня была такая же проблема с ngbootstrap.Оказывается, всплывающая подсказка создает div, и если она находится внутри svg, Angular не будет ее отображать.Поэтому я решил создать небольшую html-маску над областью svg, где я хотел вызвать всплывающую подсказку.

HTML: 

<div>
    <svg>
        <ellipse id="svg_2" cy="78.999999" cx="1042.499999" stroke-width="1.5" stroke="#000" fill="#fff"/>
    </svg>
    <div ngbTooltip="My tooltip" class="mytooltip" triggers="hover:blur click:blur focus:blur" [ngStyle]="{ 'left.px': leftPosition, 'top.px': topPosition }"></div>
</div>

Где leftPosition и topPositionустановить динамически в вашем файле ts.

SCSS / CSS: 

.mytooltip {
    position: absolute;
    width: 10px; //whatever is a reasonable hit area
    height: 10px;
}

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

Этот метод, вероятно, не подходит для массово динамических или интерактивных svgs, таких как D3.js, но в любом случае он имеет свою собственную систему всплывающих подсказок..

...