JQuery 工具提示：标题属性内的目标跨度

Question

我有一个带有以下代码的 div：

<div id='mydiv' title="<span id='myspan'>Hi there</span>">

我正在使用 JQuery 的工具提示

            $("#mydiv").tooltip({
                content: function () {
                    return $(this).prop('title');
                },
               open: function (event, ui) {
                   ui.tooltip.css("max-width", "800px")

               },
               position:{
                    my:"left+10 top+25",
                    at:"left top"
               }
            });

工具提示工作正常，但我无法定位工具提示内的跨度， $('#myspan').html()返回 null。

有任何想法吗 ？

谢谢 ！

Answer 1

这是因为 jQuery 工具提示的工作方式。 每次将 div 悬停时，都会使用工具提示创建一个元素并附加到 DOM。 每次你移除悬停时，这个元素都会从 DOM 中移除。 所以你不能瞄准它。 DOM 上没有。 在 DOM 中，只有当您将 div 悬停时。

这是一个更好地理解这一点的例子：

$( "#mydiv" ).hover(
  function() {
    alert($('#myspan').html());
  });

这将为您提供工具提示元素。 但是除非您将鼠标悬停在 div 中，否则无法定位您的工具提示

演示

Answer 2

尝试使用 onShow 事件

$("#mydiv").tooltip({
            content: function () {
                return $(this).prop('title');
            },
           open: function (event, ui) {
               ui.tooltip.css("max-width", "800px")

           },
           position:{
                my:"left+10 top+25",
                at:"left top"
           },
           onShow: function() {
           $('#myspan').html()
           }
        });