[英]How do you scale the carousel container size in Angular-UI-Bootstrap
[英]How do I style just one specific angular-ui-bootstrap tooltip to be wider?
在我的AngualrJS应用程序中,我们使用angular-ui-bootstrap工具提示。
我有一个需要容纳长文本的工具提示。 SO问题的答案在Bootstrap工具提示中显示长文本向我展示了如何使工具提示更广泛......
...但是,如果我不想让所有工具提示更宽,只是一个特定的工具提示怎么办?
(注意: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>
只要您没有tooltip-append-to-body="true"
,就可以使用以下CSS(在此示例中,使工具提示最大宽度为400px):
CSS
.tooltip-400max + .tooltip .tooltip-inner {
max-width: 400px;
}
HTML
<div id="element1"
class="tooltip-400max"
tooltip="{{ model.longTooltip }}">Text</div>
<div>More page content</div>
上面CSS中的关键是相邻的兄弟选择器 +
。
这是因为,正如你可能知道,当你将鼠标悬停在部件1,在提示插入部件1作为后一个div,大约是这样的:
<div id="element1"
class="tooltip-400max"
tooltip="{{ model.longTooltip }}">Text</div>
<div class="tooltip fade in" and other stuff>...</div>
<div>More page content</div>
因此,CSS选择器.tooltip-400max + .tooltip
将仅选择此插入的工具提示,这是一个相邻的sibiling。 后代.tooltip-inner
最大宽度样式不会影响所有工具提示,只会影响具有tooltip-400max
类的元素的tooltip-400max
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.