2016-08-03 2 views
0

Bootstrapポップオーバーを使用してHTML5のようなエラーツールチップを実装しています。 HTML5バージョンと同様に、右にシフトするようにツールチップにオフセットを適用したいと思います。試してみてください。私はこれを達成できませんでした。Bootstrap popover offsetオプションをマスターした人はいますか?

私はいくつかの試みを成功させて試みました。ブートストラップPopover documentは、オプションとして「オフセット」を示し、暗示的なTether documentを指しています。オフセットオプション(例:オフセット: '0 25%')を追加しても動作しないようです。

enter image description here

validate.issueError = function ($elem, msg, placement) { 
    placement = placement == undefined ? 'bottom' : placement; 
    var offset = $elem.width()/4; 
    var template = '<div class="popover" style="position:relative; margin-left:' + offset + 'px" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' 
    console.log("template="+ template) 

    $elem.prop('data-toggle=popover', true); 
    var exclamationPoint = "<span style='font-weight: bold; font-size:medium; color: white; background-color: orange; height: 12px; padding: 1px 8px; margin-right: 8px;'>!</span>"; 
    var content = "<span style='font-size: smaller;'>" + msg + "</span>"; 
    $elem.popover("destroy").popover({ 
     html: true, 
     placement: placement, 
     template: template, 
     content: exclamationPoint + content 
    }).popover('show'); 

    setTimeout(function() { $elem.popover('hide') }, 5000); 
    $elem.focus(); 
    $elem.on("keydown click", function() { 
     console.log("kd?") 
     $(this).popover('hide'); 
    }) 
} 

答えて

1

あなただけのデータ属性として渡すてみましたか? data-offsetは、特定のものです。 buttonの場合はexampleです。

+0

私は正しい方向に向いてくれてありがとう。残念ながら、プロパティを動的に追加すると、ex。 $ e.lem.prop( "data-offset"、 "0 25%")は効果がありません。コンソールでは、プロパティが正しく追加されていることがわかります。任意のアイデアは評価されています –

+0

@rontornambe私が考えることができるのは、 'data-offset'属性を追加する前にインスタンス化しているということだけです。私はそれを試してみた(https://jsfiddle.net/71u4jd28/1/)、うまくいきました。 –

関連する問題