2

我正在尝试使用 Bootstrap、Angular 和Angular Bootstrap在 HTML 表单中实现工具提示或弹出框。

<div class="col-sm-6 col-sm-offset-3">                  
    <div class="form-group">
        <label for="test1">Tooltip example:</label>
        <input type="text" id="test1" name="test1" class="form-control" tooltip="{{tooltip}}"  tooltip-trigger="focus" tooltip-placement="right">
    </div>
    <div class="form-group">
        <label for="test1">Popover example:</label>
        <input type="text" id="test2" name="test2" class="form-control">
        <i class="fa fa-question-circle" popover="{{tooltip}}" popover-trigger="mouseenter" popover-placement="right" popover-append-to-body="true"></i>
    </div>                          
</div>

布局示例

工具提示和弹出框在桌面和 iPad 上都可以正常工作。但是当宽度低于 768 px 时，tooltip/popover 的正确位置不再是一个好的解决方案。

如何以更具响应性的方式解决这个问题？

移动布局失败

请看这个 Plunker： http ://plnkr.co/edit/r7CF7TCIDP592BYegeE5?p=preview

4

2 回答 2

3

你应该试试tooltip-placement="auto"

于 2015-04-03T11:42:15.493 回答
2

使用placement 'auto'
如何定位popover - auto | 顶部 | 底部 | 左 | 正确的。指定 auto 时，它将动态地重新定向弹出框。

当一个函数用于确定放置时，它会以弹出框 DOM 节点作为其第一个参数，触发元素 DOM 节点作为其第二个参数来调用。this 上下文设置为 popover 实例。

附加选项添加了“边界”

默认值：滚动父级

弹出框的溢出约束边界。接受 'viewport'、'window'、'scrollParent' 或 HTMLElement 引用的值（仅限 JavaScript）。有关更多信息，请参阅 Popper.js 的

对于那些使用 Angular Powered Bootstrap 的人来说，这可能会对您有所帮助。

<!-- tooltip will be positioned automatically to fit in the viewport -->
<button ngbTooltip="..."></button>

<!-- tooltip will always be on the right, even if it doesn't fit -->
<button ngbTooltip="..." placement="right"></button>

<!-- tooltip be on the left. If it doesn't fit, it will be on the right -->
<button ngbTooltip="..." placement="left right"></button>

<!-- you can also provide an array of strings -->
<button ngbTooltip="..." [placement]="['left', 'right']"></button>

于 2019-08-16T10:16:16.730 回答