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

#javascript #css #jquery #html5 #svg

В SVG тултип реализуется с помощью парного тега 

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


       
     
 
   
     
     
   
      
          
         
      


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








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

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

Вопрос:

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

Ответы

Ответ 1

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



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



Ответ 2

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

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

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

     
     

    


Внутрь первой пары .   

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

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

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

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



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

}