Как создать многострочный tooltip в SVG

119

22 декабря 2020, 22:30

В SVG тултип реализуется с помощью парного тега <title> Текст подсказки </title>

Чтобы тултип начал показываться при наведении курсора на объект, необходимо объект обернуть групповыми тегами <g>:

<g>
    <title>Первый атом</title>   
     <circle cy="-44" r="9"/>
</g> 
   <g>
     <title>Второй атом</title>
     <circle cx="40" cy="18" r="9"/>
   </g>
      <g>
         <title>Третий атом</title> 
         <circle cx="-40" cy="18" r="9"/>
     </g>

Ниже пример однострочных тултипов для объектов SVG.
Наведите курсор на атомы, траектории движения атомов и и через некоторое время должна появиться всплывающая подсказка.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-52 -53 100 100" stroke-width="2"> 
 <g fill="none"> 
   <g>  
     <title> Орбита первого атома  </title>  
    <ellipse fill="#F0F0F0" stroke="#66899a" rx="6" ry="44" /> 
   </g>   
       <g>      
        <ellipse fill="#F0F0F0" stroke="#e1d85d" rx="6" ry="44"  transform="rotate(-66)"/> 
		  <title> Орбита второго атома  </title>  
		</g>   
	 <g>	 
      <ellipse fill="#F0F0F0" stroke="#80a3cf" rx="6" ry="44" transform="rotate(66)"/> 
       <title> Орбита третьего атома  </title>  
	 </g>    
  <circle  stroke="#4b541f" r="44"/>  
 </g>  
 <g fill="#66899a" stroke="white"> 
   <g>    
     <title> Ядро </title> 
	    <circle fill="#80a3cf" r="13"/> 
   </g> 
     <g> 
      <title>Первый атом</title>    
      <circle cy="-44" r="9"/> 
     </g>  
   <g> 
    <title>Третий атом</title>  
     <circle cx="-40" cy="18" r="9"/> 
  </g>  
   <g> 
    <title>Второй атом</title> 
     <circle cx="40" cy="18" r="9"/> 
   </g> 
 </g> 
</svg>

К сожалению, тултипы не подлежат стилизации, то есть невозможно изменить цвет, размер шрифта и другие текстовые атрибуты.

Теги переноса текста на другую строку <tspan> ... </tspan> тоже не работают.

Вопрос:

Есть ли способ создать многострочный тултип только средствами SVG, то есть перенос строки в любом месте текста?

Answer 1

Надо просто поставить в коде перевод строки:

html, body, svg { 
  margin: auto; 
  width: 100vmin; 
  display: block; 
}

<svg viewBox="-4 -4 8 8"> 
  <g> 
    <title>Многострочный 
тултип - это 
очень легко!</title> 
    <circle r=4 fill=silver /> 
  </g> 
</svg>

Answer 2

И всё-таки, как оказалось, есть способ сделать многострочный тултип только встроенными средствами SVG.

Пример многострочного тултипа

Многострочный тултип реализуется с помощью вложенных друг в друга парных тегов <title>.

Структура вложения следующая:

<g>   
     <title> 
       <title> &#10697; Свойства атома </title>
        <title> &#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135; </title>
         <title> Название: кислород </title>
          <title> Атомная масса (молярная масса) :15,99903 </title>
           <title> Радиус атома    60 (48) пм  </title> 
            <title> &#10697; Химические свойства  </title>
           <title> &#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135; </title>
          <title> Ковалентный радиус    73 пм </title>
         <title> Радиус иона    132 (-2e) пм </title>
        <title> Электродный потенциал    0 </title>
       <title>&#10697;Термодинамические свойства простого вещества </title>
      <title> &#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135; </title>
       <title>Плотность (при н. у.)    газ: 1,42897 кг/м³ </title>
        <title>Температура плавления    54,8 К (-218,35 °C) </title>
         <title>Температура кипения    90,19 К (-182,96 °C) </title>
     </title>
     <circle fill="#80a3cf" r="13"/>
    </g>

Внутрь первой пары <title>, которая идёт без текста, последовательно вкладываются парные теги <title> с текстом ….. </title>.

Каждая пара отвечает за свою отдельную строку многострочного тултипа.

Допускается добавлять символы Unicode.

В примере ниже я добавил в заголовки символ сдвоенного прямоугольника – ⧉ и несколько символов Unicode отображающие черту, для визуального разделения заголовков и остального текста ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Наведите курсор на центральный круг и появится многострочная подсказка. На остальных элементах остались одно строчные тултипы.

.container { 
width:40%; 
height:40%; 
 
}

<div class="container"> 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-52 -53 100 100" stroke-width="2"> 
  
 <g fill="none"> 
   <g>  
     <title> Орбита первого атома  </title>  
    <ellipse fill="#F0F0F0" stroke="#66899a" rx="6" ry="44" /> 
   </g>   
       <g>      
        <ellipse fill="#F0F0F0" stroke="#e1d85d" rx="6" ry="44"  transform="rotate(-66)"/> 
		  <title> Орбита второго атома  </title>  
		</g>   
	 <g>	 
      <ellipse fill="#F0F0F0" stroke="#80a3cf" rx="6" ry="44" transform="rotate(66)"/> 
       <title> Орбита третьего атома  </title>  
	 </g>    
   
     
   <circle  stroke="#4b541f" r="44"/>  
    
 
 </g>  
 <g fill="#66899a" stroke="white"> 
   <g>    
     <title>  
	   <title>   &#10697;   Свойства атома </title> 
	   <title> &#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135; </title> 
	   <title> Название: кислород </title> 
	   <title> Атомная масса (молярная масса) :15,99903 </title> 
	   <title> Радиус атома	60 (48) пм  </title>  
	   <title> &#10697; Химические свойства  </title> 
	    <title> &#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135; </title> 
	   <title> Ковалентный радиус	73 пм </title> 
	   <title> Радиус иона	132 (-2e) пм </title> 
	   <title> Электродный потенциал	0 </title> 
	   <title>&#10697;Термодинамические свойства простого вещества </title> 
	    <title> &#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135;&#9135; </title> 
	   <title>Плотность (при н. у.)	газ: 1,42897 кг/м³ </title> 
	   <title>Температура плавления	54,8 К (-218,35 °C) </title> 
	   <title>Температура кипения	90,19 К (-182,96 °C) </title> 
	    
	 </title> 
     <circle fill="#80a3cf" r="13"/> 
       
    </g> 
   
 <g> 
    <title>Первый атом</title>    
     <circle cy="-44" r="9"/> 
 </g>  
   <g> 
     <title>Второй атом</title> 
     <circle cx="40" cy="18" r="9"/> 
   </g> 
      <g> 
         <title>Третий атом</title>  
         <circle cx="-40" cy="18" r="9"/> 
     </g>  
    
 </g> 
</svg> 
</div>