jQuery UI Tooltip: can make it copyable, with html content, and not showing title attribute on hover, but how to combine all 3 at the same time?

Question

EDIT:
SOLVED. SOLUTION AT BOTTOM.
----

QUESTION:
I'm trying to make a jQuery UI tooltip which:

• can be copied by user

• can be styled using html and css

• doesn't cause browser to show anything like a title tag on hover (other than the jQuery tooltip, obviously)

Several posts address each of these individually, but I haven't been able to put it together to make them all work at the same time.

The code below succeeds in creating a tooltip which can be copied by the user and can be styled using html and css, but it causes the browser to show the title.

$.widget("ui.tooltip", $.ui.tooltip, {
  options: {
    content: function() {
      return $(this).prop('title');
    }
  }
});
$(function() {
  $('.tooltip').tooltip({
    open: function() {
      // make sure all other tooltips are closed when opening a new one
      $('.tooltip').not(this).tooltip('close');
    }
  }).on('mouseleave', function(e) {
    var that = this;

    // close the tooltip later (maybe ...)
    mouseLeaveTimer = setTimeout(function() {
      $(that).tooltip('close');
    }, 100);

    // prevent tooltip widget to close the tooltip now
    e.stopImmediatePropagation();
  });

  $(document).on('mouseenter', '.ui-tooltip', function(e) {
    // cancel tooltip closing on hover
    clearTimeout(mouseLeaveTimer);
  });

  $(document).on('mouseleave', '.ui-tooltip', function() {
    // make sure tooltip is closed when the mouse is gone
    $('.tooltip').tooltip('close');
  });
});

label {
  display: inline-block;
  width: 5em;
}
.tipPopUp {
  color: blue;
  background-color: yellow;
}

<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<table>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Data....
        <br>Data....</td>
      <td>Data....
        <br>Data....</td>
      <td><span class="tooltip" title="<span class='tipPopUp'>Tooltip<br>with html<br>and<br>styled</span>">
        Data with
        <br>tooltip</span>
        <br>Data without tooltip</td>
      <td>Data....
        <br>Data....
        <br>More
        <br>and
        <br>more
        <br>data</td>
    </tr>
</table>

Fiddle...

To see the problem, hover the mouse over the line "Data with tooltip". It shows a jQuery UI tooltip which can be copied by the user and which can be styled with html and css.

But the browser (I'm using Firefox) still shows the title attribute on hover. To see it happen, first put the mouse over that line to get the jQuery UI tooltip, then move the mouse slowly to somewhere in the white space between the 2 lines (between "Data" and "with tooltip"). The browser shows a tooltip containing "Tooltip br with html br and br styled".

The code above is made using https://stackoverflow.com/a/15734408/4189551 to get html content in the tooltip. The tooltip is copyable using the solution in the gist from the answer to Jquery UI tooltip. Set timeout and set hover events. Freeze tooltip on mouseover.

I found lots of ways to hide the title tag on hover, but I can't get them to work with this code.

---

SOLUTION:
Someone outside stackoverflow suggested a solution which worked well. I'm posting it here so anyone else who is interested can benefit.

Putting the tooltip content into title has the two problems of causing browsers to inadvertently show the title attribute, as well as opening up XSS vulnerabilities (http://bugs.jqueryui.com/ticket/9019#comment:2).

The solution that worked for us is to put the tooltip content into a custom attribute. The code below is the best variant we found for this gets the desired result of a tooltip which: 1) can be copied by the user; 2) can have html in the content; and 3) which does not cause browsers to inadvertently display the title attribute.

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        items: "[data-tooltip]",
        content: function () {
            return $(this).attr('data-tooltip');
        }
    }
});

//3. makes the tooltip copy-able by the user
  $(function() {
        $( '.tooltip' ).tooltip({
            open: function(){
                // make sure all other tooltips are closed when opening a new one
            $('.tooltip').not(this).tooltip('close');
            }
        }).on('mouseleave', function(e){
            var that = this;

            // close the tooltip later (maybe ...)
            mouseLeaveTimer = setTimeout(function(){
                $(that).tooltip('close');
            }, 100);

            // prevent tooltip widget to close the tooltip now
            e.stopImmediatePropagation(); 
        });

        $(document).on('mouseenter', '.ui-tooltip', function(e){
            // cancel tooltip closing on hover
            clearTimeout(mouseLeaveTimer);
        });

        $(document).on('mouseleave', '.ui-tooltip', function(){
            // make sure tooltip is closed when the mouse is gone
            $('.tooltip').tooltip('close');
        });
  });

This creates a tooltip containing valid css-styled, html content which can be copied by the user.