6

フレームワーク

目的

powerTip私は別の内部を持ちたいですpowerTip。

現在の結果

最初のヒント ( tip1) は正常に表示されますが、2 番目のヒント ( tip2) はまったく表示されません。tip2下の境界線がすべて表示されるという点で、CSS は機能しますが、ロールオーバーすると表示されpowerTipません。

HTML

<p>
    Blah blah blah blah blah
    <span data-powertiptarget="tip1">Blah</span>
    and more blah blah blah.
</p>

<div id="tip1" class="tooltip-div">
    <p>
        Email: <a href="mailto:me@somebody.com">me@somebody.com</a><br/>
        <span data-powertiptarget="tip2">Nomenclature</span>: Blah
    </p>
</div>

<div id="tip2" class="tooltip-div">
    Nomenclature: blah blah blah blah.
</div>

CSS

.tooltip {
    border-bottom: 1px dashed #333333;
}

.tooltip-div {
    display: none;
}

#powerTip {
    text-align: left;
}

#powerTip a {
    color: #FFFFFF;
}

#powerTip a:visited {
    color: #F0F0F0;
}

#powerTip .tooltip {
    border-bottom: 1px dashed #FFFFFF;
}

JavaScript

$('span[data-powertiptarget]').addClass('tooltip');
$('span[data-powertiptarget]').each( function() {
    $(this).powerTip( {
        placement: 'ne',
        mouseOnToPopup: true,
        smartPlacement: true
    });
});
4

2 に答える 2

6

ツールチップが表示されない理由は、各ツールチップの内容が個別の div にコピーされているように見え、それに関連付けられているイベントがその過程で失われるためです。たとえば、クロム開発者ツールを介して表示されるツールチップを調べると、それがよくわかります。

したがって、ツールチップが開いたら、div#powerTip 内に powerTip2 インスタンスを作成する必要があります。また、開いているツールチップごとに一意の ID が必要です。

JsFiddle の例

コード：

$('span[data-powertiptarget]').addClass('tooltip');
createPowerTips($('span[data-powertiptarget]'),'powerTip');

function createPowerTips($elems, popupId) {
    $elems.each( function() {
        $(this).powerTip( {
            popupId: popupId,
            placement: 'ne',
            mouseOnToPopup: true,
            smartPlacement: true
        }).on({
            powerTipOpen: function() {
                createPowerTips(
                    $('#powerTip').find('span[data-powertiptarget]'),
                    'powerTip2'
                );
            }
        });
    });
}

例でわかるように、ネストされたツールチップには CSS が関連付けられていません。したがって、#powerTip CSS を #powerTip2 用にすべてコピーする必要があります。

明らかに、プラグインはそのようなユースケース向けに設計されていません.

于 2012-12-18T23:59:52.627 に答える
0

代わりにqTipを使用しないのはなぜですか?

同様の例:ツールチップ上のツールチップ

また、 qTip v2が存在することに注意してください。

于 2012-12-19T03:59:58.877 に答える