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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:25:09  来源:igfitidea点击:

uib-tooltip-html not working

angularjstwitter-bootstrapangular-ui-bootstrap

提问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>