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()
           }
        });