css - 如何仅设计一个特定的 angular-ui-bootstrap 工具提示以使其更宽?

标签 css angular-ui-bootstrap

在我的 AngualrJS 应用程序中,我们使用 angular-ui-bootstrap 工具提示。

我有一个工具提示需要容纳长文本。 SO 问题的答案 Displaying long text in Bootstrap tooltip向我展示如何使工具提示变宽...

...但是,如果我不想让所有工具提示变宽,只想一个特定的工具提示怎么办?

(注意:AngularJS 1.2.24,jQuery 可用...但我宁愿能够将样式应用于单个工具提示,也不愿变得更复杂)

最佳答案

另一方面,如果您有tooltip-append-to-body="true",则可以使用@Daryn 代码的以下修改版本

CSS

.tooltip-400max .tooltip-inner {
  max-width: 400px;
}

HTML

<div id="element1"
  tooltip-append-to-body="true"
  tooltip-class="tooltip-400max"
  tooltip="{{ model.longTooltip }}">Text</div>
<div>More page content</div>

关于css - 如何仅设计一个特定的 angular-ui-bootstrap 工具提示以使其更宽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26940156/

相关文章:

AngularJS 和 Twitter Bootstrap 主题(或替代方案?)

javascript - 让图像在变换后填充容器(90deg)

css - CSS 中的链接没有装饰

angularjs - ui.bootstrap 弹出窗口单击时关闭

javascript - 单击匹配链接时切换单个 div 的属性

javascript - Angular 将数据传递到模态和模态实例

javascript - jquery 通过点击一个标签删除一行表 (<tr>)

html - 在 div 的一 Angular 覆盖 bootstrap 标签

php - Firebug 无法个性化 css 选择器

javascript - 在同一 Angular.js 应用程序中使用 'ui.bootstrap' 和 '720kb.datepicker' 模块时出错