0

我 使用的线索提示效果很好，但是我的一个工具提示的内容变得非常大，所以我想将它从位于本地标题属性内移动到一个单独的隐藏 div 中。

除了我不知道如何向工具提示添加标题之外，这很好用。当我有标题属性内容时，这里是我的工具提示代码：

$('#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: '|' 消失并添加local:true（因为如果我在使用 local:true 时包含“splitTitle”，则工具提示似乎是空的。

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

4

3 回答 3

1

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

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

于 2012-01-17T20:32:07.123 回答
1

您可以通过在工具提示触发元素上设置“标题”属性来设置工具提示标题属性。所以你的 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>
于 2012-01-16T21:22:16.603 回答
0

您不能按原样使用插件。

该插件生成以下 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）附加到$cluetipInnerelement div.cluetip-inner。该<h3>元素被完全忽略。

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

splitTitle：如果使用，则仅由 title 属性填充线索提示

于 2012-01-03T14:01:03.717 回答