0
Bootstrapポップオーバーを使用してHTML5のようなエラーツールチップを実装しています。 HTML5バージョンと同様に、右にシフトするようにツールチップにオフセットを適用したいと思います。試してみてください。私はこれを達成できませんでした。Bootstrap popover offsetオプションをマスターした人はいますか?
私はいくつかの試みを成功させて試みました。ブートストラップPopover documentは、オプションとして「オフセット」を示し、暗示的なTether documentを指しています。オフセットオプション(例:オフセット: '0 25%')を追加しても動作しないようです。
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');
})
}
私は正しい方向に向いてくれてありがとう。残念ながら、プロパティを動的に追加すると、ex。 $ e.lem.prop( "data-offset"、 "0 25%")は効果がありません。コンソールでは、プロパティが正しく追加されていることがわかります。任意のアイデアは評価されています –
@rontornambe私が考えることができるのは、 'data-offset'属性を追加する前にインスタンス化しているということだけです。私はそれを試してみた(https://jsfiddle.net/71u4jd28/1/)、うまくいきました。 –