0

私 はうまく機能する手がかりを使用していますが、ツールチップの1つのコンテンツが非常に大きくなっているので、ローカルのtitle属性内にあるものから別の非表示の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からツールチップを調達するときに、手がかりのツールチップの上部にタイトルを表示するにはどうすればよいですか。Webサイトのデモ例では、非表示のdivを使用した例のいずれにも見出しが表示されていないようです。

4

3 に答える 3

1

Michalが言ったように、解決策は次のとおりです。

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

于 2012-01-17T20:32:07.123 に答える
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>
于 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から)が追加され$cluetipInner、要素が追加されますdiv.cluetip-inner。要素は<h3>完全に無視されます。


注:splitTitleオプションについては、ドキュメントに次のように記載されています。

splitTitle:使用する場合、clueTipはtitle属性によってのみ入力されます

于 2012-01-03T14:01:03.717 に答える