首页 文章

bootstrap popover:高级定位

提问于
浏览
47

我正在尝试为一个触发器定位一个twitter-bootstrap popover,该触发器位于960px宽网页的最右上角 . 理想情况下,我将它放在底部并用CSS移动箭头(因此箭头位于弹出窗口的右上角) .

不幸的是,“放置”:“底部”定位还不够,因为它会将其置于触发器下方 .

我正在寻找能够将弹出窗口静态放置在触发器左下方的解决方案 . 我读了很多问题,却找不到任何问题 .

提示?

9 回答

  • 31

    这很有效 . 测试 .

    .popover {
        top: 71px !important;
        left: 379px !important;
    }
    
  • 17

    一个简单的解决方案

    只需为您的popover好友添加一个属性!


    小提琴

    如果你赶时间,请参见my fiddle


    主要目标

    我们想要为特定的popover添加ID或类,以便我们可以通过CSS以我们想要的方式自定义它 .

    请注意,我们不想自定义所有弹出窗口!这是一个可怕的想法(基本上,截至今天,接受的答案是一个可怕的想法..)


    示例

    这是一个简单的例子 - 像这样显示popover:

    enter image description here

    HTML:

    <button id="my-button" data-toggle="popover">My Button</button>
    

    JS:

    // We add the id 'my-popover'
    $("#my-button").popover({
        html : true,
        placement: 'bottom'
    }).data('bs.popover').tip().attr('id', 'my-popover');
    

    CSS:

    #my-popover {
        left: -169px!important;
    }
    
    #my-popover .arrow {
        left: 90%
    }
    
  • 7

    我创建了一个jQuery插件,提供了4个附加位置:topLeft,topRight,bottomLeft,bottomRight

    您只需包含缩小的js或未缩小的js,并在同一文件夹中包含匹配的css(minified vs unminified) .

    https://github.com/dkleehammer/bootstrap-popover-extra-placements

  • 4

    Popover的视口

    在所有场合中最适合您的解决方案,特别是如果您的网站具有流畅的宽度,是使用Bootstrap Popover的 viewport 选项 .

    这将使弹出窗口在您指定的选择器内占据宽度 . 因此,如果触发按钮位于该容器的右侧,则当弹出框位于该区域内时,引导箭头也将出现在右侧 . 见jsfiddle.net

    如果您想从容器边缘获得一些空间,也可以使用 padding . 如果你不想填充只需使用 viewport: '.container'

    $('#popoverButton').popover({
       container: 'body',
       placement: "bottom",
       html: true,   
       viewport: { selector: '.container', padding: 5 },
       content: '<strong>Hello Wooooooooooooooooooooooorld</strong>'
     });
    

    在以下html示例中:

    <div class="container">
       <button type="button" id="popoverButton">Click Me!</button>
    </div>
    

    和CSS:

    .container {
      text-align:right;
      width: 100px;
      padding: 20px;
      background: blue;
    }
    
  • 9

    我通过向bootstrap css库添加一些代码来解决这个问题(部分) . 您将不得不修改tooltip.js,tooltip.less,popover.js和popover.less

    在tooltip.js中,在switch语句中添加这种情况

    case 'bottom-right':
              tp = {top: pos.top + pos.height, left: pos.left + pos.width}
              break
    

    在tooltip.less中,在.tooltip {}中添加这两行

    &.bottom-right { margin-top:   -2px; }
    &.bottom-right .tooltip-arrow { #popoverArrow > .bottom(); }
    

    在popover.js和popover.less中也这样做 . 基本上,无论您在哪里找到提及其他位置的代码,都要相应地添加您想要的位置 .

    正如我前面提到的,这部分地解决了这个问题 . 我现在的问题是弹出窗口的小箭头没有出现 .

    note: 如果您想在左上角使用弹出窗口,请使用'.top'的top属性和'.left'的左侧属性

  • 0

    要引导3.0.0:

    .popover{ right:0!important; }
    

    并修改

    .popover { max-width:WWWpx!important; }
    

    其中WWW是您正确的最大宽度,以显示您的弹出窗口内容 .

  • 13

    我必须对弹出窗口进行以下更改,并在下面放置一些重叠并正确显示箭头 .

    JS

    case 'bottom-right':  
        tp = {top: pos.top + pos.height + 10, left: pos.left + pos.width - 40}  
        break
    

    CSS

    .popover.bottom-right .arrow {  
          left: 20px; /* MODIFIED */  
          margin-left: -11px;  
          border-top-width: 0;  
          border-bottom-color: #999;  
          border-bottom-color: rgba(0, 0, 0, 0.25);  
          top: -11px;  
        }  
        .popover.bottom-right .arrow:after {  
          top: 1px;  
          margin-left: -10px;  
          border-top-width: 0;  
          border-bottom-color: #ffffff;  
        }
    

    这可以扩展到其他地方的箭头位置..享受!

  • 0

    也许你不需要这种逻辑来表示响应行为 .

    例如 .

    placement: 'auto left'
    

    Bootstrap 3的 placement 值为 placement . Bootstrap doc

    指定“auto”时,它将动态重新定向工具提示 . 例如,如果展示位置为“自动离开”,则工具提示会尽可能显示在左侧,否则它将显示正确 .

  • 3

    如果您查看bootstrap source codes,您会注意到可以使用保证金修改头寸 .

    所以,首先你应该改变popover模板来添加自己的css类,以免与其他弹出窗口冲突:

    $(".trigger").popover({
      html: true,
      placement: 'bottom',
      trigger: 'click',
      template: '<div class="popover popover--topright" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
    });
    

    然后使用css你可以轻松切换弹出位置:

    .popover.popover--topright {
      /* margin-top: 0px; // Use to change vertical position */
      margin-right: 40px; /* Use to change horizontal position */
    }
    .popover.popover--topright .arrow {
      left: 88% !important; /* fix arrow position */
    }
    

    此解决方案不会影响您拥有的其他弹出窗口 . 同样的解决方案也可用于工具提示,因为popover类继承自tooltip类 .

    Here's a simple jsFiddle

相关问题