css - 小型デバイスでの Bootstrap フォームのツールチップとポップオーバー

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 ピクセル未満の場合、ツールチップ/ポップオーバーの正しい位置は適切な解決策ではなくなります。

これをより応答性の高い方法で解決するにはどうすればよいですか?

このプランカーをご覧ください: http://plnkr.co/edit/r7CF7TCIDP592BYegeE5?p=preview

Answer 1

試してみてくださいtooltip-placement="auto"