Tooltip Title attribute does not work

Question

When I add this code, tooltip does not appear on SVG Elements (Circle, rect)

I am using this code because I wanto to use <p> and <span> tag within the tooltip

Code;

$(function () {
      $.widget("ui.tooltip", $.ui.tooltip, {
          options: {
              content: function () {
                  return $(this).prop('title');
              }
          }
      });

      $(document).tooltip();
  });

It works except svg When I remove this, it works for svg elements but not <p> <span> tags

Thanks in advance.

I'm using jquery-ui

Answer 1

As @Robert Longson declared in the comment

I assign a title attribute to both elements and children, then it works.

It was like;

$( "#elementId" )[ 0 ].title = '<span class="red-span"> TRY OUT </span>';
$( "#elementId" )[ 0 ].children.title = '<span class="red-span"> TRY OUT </span>';