8

ラベルの左側に表示されるポップオーバーがあります。

 $('label').hover(function () {
                $(this).popover({
                    offset: 10,
                    placement: 'left'
                }).popover('show');

ポップオーバーは現在ラジオ ボタンをブロックしていて、左に移動したい、たとえば 10px にします。これを行う方法がわかりません。offset はまったく何もしていないようです (10 または 10000 を追加しても違いはありません)。そのようなラベルの HTML は次のとおりです。

 <label for="MainContent_Wizard1_rbLeader" id="MainContent_Wizard1_lblLeader" class="radio" data-original-title="Visionary Giving Level" data-content="Diamond (full-page ad) + 2 dinner tickets">Visionary ($250,000)<span class="radio" name="rbLeader"><input id="MainContent_Wizard1_rbLeader" type="radio" name="ctl00$MainContent$Wizard1$GivingLevel" value="rbLeader" onclick="WizardStep1_Click();" /></span></label>

CSS でクラスを次のようにオーバーライドすることで、ポップオーバーの位置を設定することができます。

.popover {
    left: 380px !important;
}

しかし、これは理想とはほど遠いもので、さまざまなブラウザーを使用してさまざまな場所に表示されるためです。

小さな右マージンを追加する方法があるはずですよね？

ありがとう。

4

3 に答える 3

12

offset単一のポップオーバーのスタイルを設定することはかなり不可能に思えます。また、Sara が言及しているように、 (qtip を思い浮かべるかもしれません)などのオプションはありません。ただし、ドキュメントに記載されていないオプションtemplate、オプションから「派生した」ものを使用できtooltipます (実際、ポップオーバーは のみを導入しますcontent)。

変更templateすることで、各ポップオーバーを個別にスタイルできます! 私にはあなたの問題はarrowポップオーバー自体以上のものであるように思われるので、このように矢印のスタイルをテンプレートに追加するだけで、矢印を真ん中から上下に動かそうとすることができます

$('label').hover(function() {
    $(this).popover({
        placement: 'left',
        template: '<div class="popover"><div class="arrow" style="top:65px;"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
    }).popover('show');
});

もちろん、ここでは、すべてのラベルに設定されたすべてのポップオーバーの矢印が により変更されます$('label').hoverが、ポップオーバーは必要に応じて CSS を使用せずに個別にスタイルを設定できます。ラジオ ボタンのないものは必要ない場合があります。

更新 - ポップオーバー全体を +10px 左にスタイルします

...
 template: '<div class="popover" style="margin-left:-10px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
...
于 2012-10-26T00:45:15.987 に答える
1

要素に data-placement='left' を追加できます。

于 2015-07-15T15:41:13.900 に答える