当我从隐藏的div（与title属性）中获取内容时，如何向cluetip工具提示添加标题

Question

我正在使用cluetip工作得很好，但我的一个工具提示的内容变得非常大，所以我想将它从坐在本地title属性中移动到一个单独的隐藏div中。

除了我无法弄清楚如何在Tooltip中添加标题这一事实之外，这种方法很好。 当我有标题属性内容时，这是我的工具提示代码：

$('#subscribe').cluetip({
    cluetipClass: 'jtip',
    activation: 'click',
    topOffset: 10,
    leftOffset: -175,
    splitTitle: '|',
    sticky: true,
    closePosition: 'title',
    arrows: true
});

这是我的隐藏div的新代码：

$('#subscribe').cluetip({
    local:true,
    cluetipClass: 'jtip',
    activation: 'click',
    topOffset: 10,
    leftOffset: -175,
    sticky: true,
    closePosition: 'title',
    arrows: true
});

正如你可以看到splitTitle：'|' 离开并且本地：true被添加（因为如果我在使用local：true时包含“splitTitle”，工具提示似乎是空的。

鉴于我不能使用splitTitle，当我从隐藏的div中获取工具提示时，如何在我的cluetip工具提示的顶部有一个标题。 在网站上的演示示例中，似乎没有使用隐藏div的示例显示标题。

Answer 1

您可以通过在工具提示触发元素上设置“title”属性来设置工具提示标题属性。 所以你的HTML看起来像

<!-- your trigger -->    
<a class="load-local" href="#loadme" rel="#loadme" title="Put your tooltip title here">
    I trigger tooltip
</a>
<!-- your local tooltip -->
<div id="loadme">
    this is hidden local content
</div>

Answer 2

就像Michal说的，这是解决方案：

http://jsfiddle.net/adaz/6jfDc/

Answer 3

您无法使用该插件。

该插件生成以下HTML标记：

<div id="cluetip">
    <div class="cluetip-outer">
        <h3 class="cluetip-title />
        <div class="cluetip-inner" />
    </div>
</div>

查看插件的源代码（ GitHub ）：

/***************************************
* load an element from the same page
***************************************/
      } else if (opts.local) {
        var $localContent = $(tipAttribute + (/^#\S+$/.test(tipAttribute) ? '' : ':eq(' + index + ')')).clone(true).show();
        if (opts.localIdSuffix) {
          $localContent.attr('id', $localContent[0].id + opts.localIdSuffix);
        }
        $cluetipInner.html($localContent);
        cluetipShow(pY);
      }
    };

“本地内容”（在您的情况下来自您的div）附加到$cluetipInner ，这是元素div.cluetip-inner 。 <h3>元素被完全忽略。

---

注意：关于splitTitle选项，文档说：

splitTitle：如果使用，clueTip将仅由title属性填充