Bootstrap form tooltip and popover on small devices

Question

I'm trying to implement tooltip or popovers in a HTML form using Bootstrap, Angular and Angular Bootstrap.

<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>

Both tooltip and popovers are working fine on desktop and iPad in landscape. But when the width is under 768 px, the right position of the tooltip/popover is no longer a good solution.

How can this be solved in a more responsive way?

Please see this Plunker: http://plnkr.co/edit/r7CF7TCIDP592BYegeE5?p=preview

Answer 1

You should try tooltip-placement="auto"

Answer 2

Use placement 'auto'
How to position the popover - auto | top | bottom | left | right. When auto is specified, it will dynamically reorient the popover.

When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the popover instance.

Additional option added "boundary"

default: scrollParent

Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's

For those who are using Angular Powered Bootstrap, this might help you.

<!-- 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>