角度用戶界面工具提示滿屏

我有一個提示狀態提示（http://angular-ui.github.io/bootstrap/），但是當這個通知很大時，它溢出了屏幕限制。這裏是正在發生的事情的打印：角度用戶界面工具提示滿屏

我無法找到角度的用戶界面，這個問題涉及的任何屬性。

在此先感謝！

2014-06-25 jgabrielfaria

你可以做一個Plunker？我只是嘗試和我的長工具提示automagically字包裝成多行，適合在屏幕上罰款。 – lmyers

證明這個問題仍然相關：Angular-ui自己的演示：http://plnkr.co/edit/3CrirzusD5ONSdIjnX4A點擊''或者使用自定義觸發器，比如focus：「'框。如果屏幕足夠小，則此工具提示懸掛在右側。角度ui的引導程序沒有位置：auto。工具提示具有最大寬度，但不會阻止它們懸掛在頁面上。修復是必要的。 –

此解決方案不使用Angular-UI，只是使用Angular和Bootstrap。引導不一定需要，只是簡化了過程位：
http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview

我往前走了，這個例子的替代方案是增加一個CSS類word-wrap和white-space屬性的工具提示類。使用Chrome或Firefox的開發人員工具，檢查元素，直到找到負責設置工具提示UI的類;然後將這些屬性添加到style.css自定義CSS文檔中。現在

，對於這個特定的解決方案，我們創建了一個工具提示指令，並允許其參加分班屬性來確定定位

角碼，我們摧毀提示我們在完成後以防止內存泄漏：

var app = angular.module('test', []); 

angular.module('test').directive('tooltip', function() { 
      return { 
       restrict: 'A', 
       link: function (scope, element, attrs) { 
       $(element) 
         .attr('title', attrs.tooltip) 
         .tooltip({placement: attrs.placement}); 
       scope.$on('$destroy', function() { 
        element.tooltip('destroy'); 
       }); 
       } 
      } 
     })

CSS代碼，因爲我們不得不重寫一些引導的默認值：

.tooltip-inner { 
    width: auto; 
    min-width: 180px; 
    background-color: #c0d3d2; 
    color: #000000; 
    font-weight: 600; 
    margin: 0 5px 0 -5px; 
    /*margin-left: -5px;*/ 
} 

/* Make tooltips opaque */ 
.tooltip.in { opacity: 1.8; filter: alpha(opacity=100); } 
/*Change tooltip arrow color for bottom placement*/ 
.tooltip.bottom .tooltip-arrow { 
    top: 0; 
    left: 50%; 
    margin-left: -5px; 
    border-bottom-color: #c0d3d2; 
    border-width: 0 5px 5px; 
}

來源

2015-04-04 20:15:53 Boris

我懷疑酥料餅被繼承所以我從它所在的容器定位信息。嘗試設置popover-append-to-body，以便它不在該容器中。

有一個在角UI的當前版本中的錯誤，所以你確實有設置：

popover-append-to-body="true"

但是，將其固定在下一版本，所以你不需要=「真「部分，只需設置屬性。

來源

2015-12-21 21:27:40

這對我來說通過添加'''tooltip-append-to-body =「true」'''。 –

角度用戶界面工具提示滿屏

回答

相關問題