jQuery UI tooltip to data-title

Question

I'm trying to change the default [title] usage from jQuery UI tooltip to [data-title].

<script>
    $(function () {
        $(document).tooltip({
            track: true,
            items: "[data-title]",
            content: function () {
                return ( ( $( this ).prop( 'data-title' ).replace( '|', '<br />' ) ) );
            }
        });
    });
</script>

<span class="class blade" data-title="Tooltip title"></span>

This works perfectly if I remove the data-, but with it nothing displays.

Answer 1

You can use the data() api to read the data-* attribute

$(function () {
    $(document).tooltip({
        track: true,
        items: "[data-title]",
        content: function () {
            return $(this).data('title').replace('|', '<br />');
        }
    });
});

Demo: Fiddle

Answer 2

Do not use prop() in these circumstances.

You are trying to fetch the value of an HTML attribute, not a DOM property, so use attr() instead:

return $(this).attr("data-title").replace("|", "<br />");

data- attributes, unlike most other HTML attributes, do not have DOM property equivalents.