0

I have an svg element. In the text tag, how do i add ellipses and a tooltip when the text exceeds the width of svg using javascript/jquery only

<svg viewbox="0 0 36 36" class="circular-chart green">
     <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
     <path class="circle" stroke-dasharray="60, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
      <text x="18" y="10.35" class="questionText">Lorem Ipsum is simply dummy </text>
</svg>
Kakul Sarma
  • 303
  • 1
  • 4
  • 21
ashwin1014
  • 351
  • 1
  • 5
  • 18
  • A function to do what you're asking for here: https://stackoverflow.com/questions/5474871/html-how-can-i-show-tooltip-only-when-ellipsis-is-activated – Ignacio Ara May 07 '18 at 10:52
  • Or calculate width of the text and if greater than the svg length, add an ellipsis. https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript – Ishmeet Singh May 07 '18 at 10:55

0 Answers0