Bootstrap表单工具提示和小型设备上的popover

Question

我尝试使用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像素时，工具提示/弹出窗口的正确位置不再是一个好的解决方案。

如何以更敏感的方式解决这个问题？

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

Answer 1

您应该尝试tooltip-placement="auto"

Answer 2

使用展示位置“自动”
如何放置弹出框-自动|顶部|底部|左|对。 指定auto时，它将动态调整弹出框的方向。

使用函数确定放置位置时，将使用弹出式DOM节点作为第一个参数，并使用触发元素DOM节点作为第二个参数来调用它。此上下文设置为弹出实例。

附加选项添加了“边界”

默认值：scrollParent

弹出框的溢出约束边界。接受“视口”，“窗口”，“ scrollParent”或HTMLElement引用的值（仅JavaScript）。有关更多信息，请参阅Popper.js的

对于那些使用Angular Powers 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>