jQuery UI工具提示到数据标题

Question

我试图将jQuery UI工具提示的默认[标题]用法更改为[数据标题]。

<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>

如果删除数据，这种方法非常有效，但是没有任何显示。

Answer 1

您可以使用data() api阅读data-*属性

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

演示：Fiddle

Answer 2

在这些情况下不要使用prop()。

您正在尝试获取 HTML属性的值，而不是 DOM属性，因此请改用attr()：

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

与大多数其他HTML属性不同，

data-属性没有DOM属性等价物。