2015-04-03 20 views
1

我試圖在HTML窗體中使用Bootstrap,Angular和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> 

Layout example

兩個提示和popovers正在研究在風景桌面和iPad的罰款。但是,當寬度低於768像素時,工具提示/彈出窗口的正確位置不再是一個好的解決方案。

如何以更快的響應方式解決這個問題?

fails in mobile layout

請參閱本Plunker: http://plnkr.co/edit/r7CF7TCIDP592BYegeE5?p=preview

+0

您使用的「容器」,容器是一個僞固定寬度,中心的容器大小卸任窗口調整大小。您不必使用容器來設計響應。 – 2015-04-03 11:33:13

回答

3

你應該嘗試tooltip-placement="auto"

+0

仍然存在問題,溢出是自動的所以沒有工作。 – 2015-04-03 11:50:04

相關問題