twitter-bootstrap uib-tooltip-html 不起作用
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/40992011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
uib-tooltip-html not working
提问by Marvin
From version 0.14 of ui-bootstrap, it looks like uib-tooltip-html (previsously : tooltip-html-unsafe) does not work anymore... or not the way I used to have it work.
从 ui-bootstrap 的 0.14 版开始,看起来 uib-tooltip-html(以前是:tooltip-html-unsafe)不再工作了……或者不是我以前使用的方式。
Basicely, the 'tooltip' works when the 'tooltip-html' does not:
基本上,当 'tooltip-html' 不起作用时,'tooltip' 起作用:
<a href="#" uib-tooltip-html="UIB-TOOLTIP-HTML">UIB-TOOLTIP-HTML</a>
<a href="#" tooltip-placement="right" uib-tooltip="UIB-TOOLTIP">UIB-TOOLTIP</a>
http://plnkr.co/edit/fJt3nBbT6rSbiN50h7Bp?p=preview
http://plnkr.co/edit/fJt3nBbT6rSbiN50h7Bp?p=preview
And since ui-bootstrap doc lacks example regarding this directive, I cannot guess what I am doing wrong.
而且由于 ui-bootstrap doc 缺少有关此指令的示例,我无法猜测我做错了什么。
Any idea?
任何的想法?
回答by JB Nizet
The example of the documentation of version 0.14definitely shows how to use it. Excerpts:
在0.14版本的文档的例子无疑展示了如何使用它。摘录:
HTML:
HTML:
I can even contain HTML. <a href="#" uib-tooltip-html="htmlTooltip">Check me out!</a>
JS:
JS:
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
The latest docalso has an example:
最新的文档也有一个例子:
Html:
网址:
<p>
I can even contain HTML as a
<a href="#" uib-tooltip-html="htmlTooltip">scope variable</a> or
<a href="#" uib-tooltip-html="'static. {{dynamicTooltipText}}. <b>bold.</b>'">inline string</a>
</p>
JS:
JS:
$scope.dynamicTooltipText = 'dynamic';
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
回答by JRT
I had to do it like this (thanks to Herbi Shtini for pointing out the single quotation mark hack)
我不得不这样做(感谢 Herbi Shtini 指出单引号黑客)
viewModel.tooltipContent = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
<div uib-tooltip-html="'{{main.tooltipContent}}'" tooltip-placement="bottom">
回答by Atul Baldaniya
Hey try like this i get html mix tool tip using ubi-tooltipgiven below
嘿,像这样尝试我使用下面给出的ubi-tooltip获得 html mix 工具提示
In JS.
在JS中。
app.controller("yoyoController", function($scope, $sce) {
$scope.text = $sce.trustAsHtml('Yo <b>Yo</b>');
});
In HTML
在 HTML 中
<div ng-controller="yoyoController">
<p uib-tooltip-html="text" >
A Thing With an HTML Tooltip
</p>
</div>

