【问题标题】:Has anyone mastered the Bootstrap popover offset option?有没有人掌握了 Bootstrap 弹出偏移选项?
【发布时间】:2016-12-09 18:43:12
【问题描述】:

我正在使用 Bootstrap 弹出框实现类似 HTML5 的错误工具提示。与 HTML5 版本一样,我想对工具提示应用偏移量,使其向右移动。尽我所能,我无法做到这一点。

我尝试了几种模板方法,但均未成功。 Bootstrap 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');
    })
}

【问题讨论】:

标签: javascript twitter-bootstrap popover


【解决方案1】:

您是否尝试将其作为数据属性传递? data-offset 是具体的。这是examplebutton

【讨论】:

  • 感谢您为我指明正确的方向。不幸的是,当我动态添加属性时,例如。 $e.lem.prop("data-offset", "0 25%") 它没有效果。在控制台中,我可以看到属性已正确添加。任何想法表示赞赏
  • @rontornambe 我唯一能想到的是,您在添加 data-offset 属性之前正在实例化它。我试过here,效果很好。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-11-01
  • 2011-05-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多