首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >uib-tooltip-html不起作用

uib-tooltip-html不起作用
EN

Stack Overflow用户
提问于 2016-12-06 17:33:51
回答 3查看 13.4K关注 0票数 2

从ui-bootstrap的0.14版本开始,uib-tooltip-html (前身是tooltip-html-unsafe)看起来不再工作了……或者不是我以前的工作方式。

基本上,当'tooltip-html‘不起作用时,'tooltip’就会起作用:

代码语言:javascript
复制
<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

由于ui-bootstrap文档缺少关于此指令的示例,我无法猜测我做错了什么。

有什么想法吗?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-12-06 19:38:19

example of the documentation of version 0.14明确地展示了如何使用它。摘录:

HTML:

代码语言:javascript
复制
I can even contain HTML. <a href="#" uib-tooltip-html="htmlTooltip">Check me out!</a>

JS:

代码语言:javascript
复制
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

The latest doc也有一个例子:

Html:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
$scope.dynamicTooltipText = 'dynamic';
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
票数 13
EN

Stack Overflow用户

发布于 2018-02-08 20:39:31

我不得不这样做(感谢Herbi Shtini指出了单引号hack)

代码语言:javascript
复制
viewModel.tooltipContent = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

<div uib-tooltip-html="'{{main.tooltipContent}}'" tooltip-placement="bottom">
票数 0
EN

Stack Overflow用户

发布于 2019-01-24 18:26:00

嘿,试着这样做,我得到了html混合工具提示使用ubi-工具提示如下所示

在JS中。

代码语言:javascript
复制
app.controller("yoyoController", function($scope, $sce) {
    $scope.text = $sce.trustAsHtml('Yo <b>Yo</b>');
});

在HTML中

代码语言:javascript
复制
<div ng-controller="yoyoController">
    <p uib-tooltip-html="text" >
        A Thing With an HTML Tooltip
    </p>
</div>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40992011

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档