Как добавить всплывающую подсказку в графику svg?

У меня есть серия прямоугольников svg (с использованием D3.js), и я хочу отображать сообщение при наведении курсора мыши, сообщение должно быть окружено ящиком, который действует как фон. Они должны быть идеально совмещены друг с другом и с прямоугольником (сверху и по центру). Каков наилучший способ сделать это?Как добавить всплывающую подсказку в графику svg?

Я попытался добавить текст svg, используя атрибуты «x», «y», «width» и «height», а затем добавив svg rect. Проблема в том, что опорная точка для текста находится посередине (так как я хочу, чтобы она была выровнена по центру, я использовал text-anchor: middle), но для прямоугольника это верхняя левая координата, плюс я хотел немного поля вокруг текста, что делает его добрым боли.

Другой вариант - использовать html div, что было бы неплохо, потому что я могу добавить текст и дополнение напрямую, но я не знаю, как получить абсолютные координаты для каждого прямоугольника. Есть ли способ сделать это?

источник

2012-05-17 nachocab

Если нет другого пути, я думаю – nachocab

Это проблема , используя разметку для того, для чего она предназначена? – Phrogz

Это просто, что это выглядит не так хорошо, но я ценю ваш ответ. – nachocab

Вы можете использовать элемент названия, указанный в указателе Phrogz. Есть также некоторые хорошие подсказки, как Типсы http://onehackoranother.com/projects/jquery/tipsy/ (который может быть использовано, чтобы заменить все элементы заглавия), nvd3 Боба Монтеверде в JQuery или даже подсказка в Twitter от их Bootstrap http://twitter.github.com/bootstrap/

источник

2012-05-17 21:06:19 paxRoman

Можете ли вы использовать просто SVG <title> element и браузер по умолчанию, который он передает? (Примечание: это не такой же, как атрибут можно использовать на DIV title/IMG/пролеты в HTML, он должен быть ребенок элемент по имени title)

rect { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: #69c; 
 
    stroke: #069; 
 
    stroke-width: 5px; 
 
    opacity: 0.5 
 
}

<p>Mouseover the rect to see the tooltip on supporting browsers.</p> 
 

 
<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect> 
 
    <title>Hello, World!</title> 
 
    </rect> 
 
</svg>

с другой стороны, если вы действительно хотите, чтобы показать HTML в вашем SVG, вы можете вставлять HTML непосредственно:

rect { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: #69c; 
 
    stroke: #069; 
 
    stroke-width: 5px; 
 
    opacity: 0.5 
 
} 
 

 
foreignObject { 
 
    width: 100%; 
 
} 
 

 
svg div { 
 
    text-align: center; 
 
    line-height: 150px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect/> 
 
    <foreignObject> 
 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
 
     <div> 
 
     Hello, <b>World</b>! 
 
     </div> 
 
    </body>  
 
    </foreignObject> 
 
</svg>

... но тогда вам понадобится JS для включения и выключения дисплея. Как показано выше, один из способов сделать ярлык в нужном месте - обернуть прямоугольник и HTML в том же <g>, который позиционирует их вместе.

Чтобы использовать JS для поиска элементов SVG на экране, вы можете использовать getBoundingClientRect(), например. http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

источник

2012-05-17 21:06:16 Phrogz

Хорошо работает для меня, чтобы вставить название в элемент svg! –

Хороший ответ. Но учтите, что 'foreignObject' [не поддерживается в Internet Explorer] (https://caniuse.com/#search=foreignObject) –

Как добавить всплывающую подсказку в графику svg?

ответ

Смежные вопросы