关键词：
【中文标题】带有 HTML 的 Angular-ui 工具提示【英文标题】：Angular-ui tooltip with HTML 【发布时间】：2013-10-02 12:09:15 【问题描述】：我目前正在我的应用程序中添加一些引导工具提示。
所有“正常”的工具提示都可以，但是当我想使用tooltip-html-unsafe 时，我得到的只是一个空的工具提示。
我的工具提示：
<a><span tooltip-placement="right" tooltip-html-safe="myHTMLText"> Help </span></a>
在 DOM 中，我有：
<div class="tooltip-inner" ng-bind-html-unsafe="content"></div>
div 的内容似乎是空的，因此工具提示中没有任何内容可显示。我试图直接在 DOM 中放入一些 HTML 文本，例如：
<div class="tooltip-inner" ng-bind-html-unsafe="content"><b>test</b></div> 并且有效。
你有什么想法吗？
【问题讨论】：
【参考方案1】：html-unsafe 指令旨在指向它的内容。这个呢：
<div data-ng-controller="SomeCtrl">
<span data-tooltip-html-unsafe="yourContent" data-tooltip-placement="right">
Help
</span>
</div>
然后，在 SomeCtrl 中，创建一个变量来保存 html：
$scope.yourContent = "<b>my html, yay</b>
如果您想修改引导程序以从元素中获取内容，可以这样做。首先，您必须更改工具提示模板，以便它调用一个函数来获取 html：
angular.module("template/tooltip/tooltip-html-unsafe-popup.html", []).run(["$templateCache", function($templateCache)
$templateCache.put("template/tooltip/tooltip-html-unsafe-popup.html",
"<div class=\"tooltip placement\" ng-class=\" in: isOpen(), fade: animation() \">\n" +
" <div class=\"tooltip-arrow\"></div>\n" +
" <div class=\"tooltip-inner\" ng-bind-html-unsafe=\"getToolTipHtml()\"></div>\n" +
"</div>\n" +
"");
]);
然后，为 tooltipHtmlUnsafePopup 做一个链接函数：
.directive( 'tooltipHtmlUnsafePopup', function ()
return
restrict: 'E',
replace: true,
scope: content: '@', placement: '@', animation: '&', isOpen: '&' ,
templateUrl: 'template/tooltip/tooltip-html-unsafe-popup.html',
link: function(scope, element, attrs)
scope.getTooltipHtml = function()
var elemId = '#' + scope.content;
var htmlContent = $rootElement.find(elemId).html();
return htmlContent;
;
;
)
编辑：后来我从 ui-bootstrap 中提取了自定义代码，这很好，因为您现在不必修改 ui-bootstrap 即可使用它。这是提取的代码，位于名为“bootstrapx”的模块中。这仅适用于弹出框（因为我并没有真正使用工具提示），但我觉得这也应该很容易适应工具提示。
angular.module("bootstrapx", ["bootstrapx.tpls","bootstrapx.popover","bootstrapx.popover.dismisser"]);
angular.module("bootstrapx.tpls", ["template/popover/popover-html.html","template/popover/popover-html-unsafe.html","template/popover/popover-template.html"]);
angular.module( 'bootstrapx.popover', [ 'ui.bootstrap.tooltip' ] )
.directive('popover', [ function()
return
restrict: 'EA',
priority: -1000,
link: function(scope, element)
element.addClass('popover-link');
;
])
.directive('popoverHtml', [ function()
return
restrict: 'EA',
priority: -1000,
link: function(scope, element)
element.addClass('popover-link');
;
])
.directive('popoverHtmlUnsafe', [ function()
return
restrict: 'EA',
priority: -1000,
link: function(scope, element)
element.addClass('popover-link');
;
])
.directive('popoverTemplate', [ function()
return
restrict: 'EA',
priority: -1000,
link: function(scope, element)
element.addClass('popover-link');
;
])
.directive( 'popoverHtmlPopup', [ function()
return
restrict: 'EA',
replace: true,
scope: title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' ,
templateUrl: 'template/popover/popover-html.html'
;
])
.directive( 'popoverHtml', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip )
return $tooltip( 'popoverHtml', 'popover', 'click' );
])
.directive( 'popoverHtmlUnsafePopup', [ '$rootElement', function ( $rootElement )
return
restrict: 'EA',
replace: true,
scope: title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' ,
templateUrl: 'template/popover/popover-html-unsafe.html',
link: function(scope, element)
var htmlContent = '';
scope.$watch('content', function(value)
if (!value)
return;
var elemId = '#' + value;
htmlContent = $rootElement.find(elemId).html();
);
scope.getPopoverHtml = function()
return htmlContent;
;
;
])
.directive( 'popoverHtmlUnsafe', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip )
return $tooltip( 'popoverHtmlUnsafe', 'popover', 'click' );
])
.directive( 'popoverTemplatePopup', [ '$http', '$templateCache', '$compile', '$parse', function ( $http, $templateCache, $compile, $parse)
return
restrict: 'EA',
replace: true,
scope: title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' ,
templateUrl: 'template/popover/popover-template.html',
link: function(scope, element, attrs)
scope.getPopoverTemplate = function()
var templateName = scope.content + '.html';
return templateName;
;
;
])
.directive( 'popoverTemplate', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip )
return $tooltip( 'popoverTemplate', 'popover', 'click' );
]);
angular.module("template/popover/popover-html.html", []).run(["$templateCache", function($templateCache)
$templateCache.put("template/popover/popover-html.html",
"<div class=\"popover placement\" ng-class=\" in: isOpen(), fade: animation() \">\n" +
" <div class=\"arrow\"></div>\n" +
"\n" +
" <div class=\"popover-inner\">\n" +
" <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
" <div class=\"popover-content\" ng-bind-html=\"content\"></div>\n" +
" </div>\n" +
"</div>\n" +
"");
]);
angular.module("template/popover/popover-html-unsafe.html", []).run(["$templateCache", function($templateCache)
$templateCache.put("template/popover/popover-html-unsafe.html",
"<div class=\"popover placement\" ng-class=\" in: isOpen(), fade: animation() \">\n" +
" <div class=\"arrow\"></div>\n" +
"\n" +
" <div class=\"popover-inner\">\n" +
" <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
" <div class=\"popover-content\" ng-bind-html-unsafe=\"getPopoverHtml()\"></div>\n" +
" </div>\n" +
"</div>\n" +
"");
]);
angular.module("template/popover/popover-template.html", []).run(["$templateCache", function($templateCache)
$templateCache.put("template/popover/popover-template.html",
"<div class=\"popover placement\" ng-class=\" in: isOpen(), fade: animation() \">\n" +
" <div class=\"arrow\"></div>\n" +
"\n" +
" <div class=\"popover-inner\">\n" +
" <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
" <div class=\"popover-content\" ng-include=\"getPopoverTemplate()\"></div>\n" +
" </div>\n" +
"</div>\n" +
"");
]);
angular.module('bootstrapx.popover.dismisser', [])
.directive( 'dismissPopovers', [ '$http', '$templateCache', '$compile', '$parse', function ( $http, $templateCache, $compile, $parse)
return
restrict: 'A',
link: function(scope, element, attrs)
element.bind('mouseup', function(e)
var clickedOutside = true;
$('.popover-link').each(function()
if ($(this).is(e.target) || $(this).has(e.target).length)
clickedOutside = false;
return false;
);
if ($('.popover').has(e.target).length)
clickedOutside = false;
if (clickedOutside)
$('.popover').prev().click();
);
;
]);
我在body标签上有dismissPopovers指令（这可能也适用于工具提示，你只需要修改它以满足你的需要）：
<body data-ng-controller="AppController" data-dismiss-popovers>
【讨论】：
根据 angular-ui 的 wiki，这是正确的语法。 http://angular-ui.github.io/bootstrap/#/tooltip你的我试过了，没用。 哦，废话！你是对的，我忘了，我修改了引导程序来支持它。通常，它需要实际内容。 感谢您的回答。我必须把链接功能放在哪里？ 好的，我找到了一种更快的方法来修复它here。但你的也很好;) @simmi simmi 我已经编辑了答案以包含我使用的弹出框关闭器，希望对您有所帮助！【参考方案2】：我创建了自定义指令，它允许以非常简单的方式为 bootsrap 提供 html 工具提示。无需覆盖任何模板：
angular.module('vermouthApp.htmlTooltip', [
])
.directive('vaTooltip', ['$http', '$templateCache', '$compile', '$parse', '$timeout', function ($http, $templateCache, $compile, $parse, $timeout)
//va-tooltip = path to template or pure tooltip string
//tooltip-updater = scope item to watch for changes when template has to be reloaded [optional (only if template is dynamic)]
//All other attributes can be added for standart boostrap tooltip behavior (ex. tooltip-placement)
return
restrict: 'A',
scope: true,
compile: function (tElem, tAttrs)
//Add bootstrap directive
if (!tElem.attr('tooltip-html-unsafe'))
tElem.attr('tooltip-html-unsafe', 'tooltip');
return function (scope, element, attrs)
scope.tooltip = attrs.vaTooltip;
var tplUrl = $parse(scope.tooltip)(scope);
function loadTemplate()
$http.get(tplUrl, cache: $templateCache ).success(function (tplContent)
var container = $('<div/>');
container.html($compile(tplContent.trim())(scope));
$timeout(function ()
scope.tooltip = container.html();
);
);
//remove our direcive to avoid infinite loop
element.removeAttr('va-tooltip');
//compile element to attach tooltip binding
$compile(element)(scope);
if (angular.isDefined(attrs.tooltipUpdater))
scope.$watch(attrs.tooltipUpdater, function ()
loadTemplate();
);
else
loadTemplate();
;
;
]);
你是这么称呼它的
<a va-tooltip="'tooltipContent.html'" tooltip-updater="item" tooltip-placement="bottom">
<b><i>item.properties.length - propertyShowLimit + ' properties more...'</i></b>
</a>
模板可以是这样的：
<script id="tooltipContent.html" type="text/ng-template">
<span ng-repeat="prop in item.properties>
<b>prop.name</b>:
<span ng-repeat="val in prop.values">val.value </span>
<br />
</span>
</script>
【讨论】：
【参考方案3】：现在有内置模板功能：https://angular-ui.github.io/bootstrap/#tooltip
<a href="#" uib-tooltip-template="'myTooltipTemplate.html'">Custom template</a>
<script type="text/ng-template" id="myTooltipTemplate.html">
<span>Special Tooltip with <strong>markup</strong> and dynamicTooltipText </span>
</script>
【讨论】：
使用 tooltipster 的带有滚动条的工具提示
】使用tooltipster的带有滚动条的工具提示【英文标题】：tooltipwithscrollbarusingtooltipster【发布时间】：2016-06-2610:33:27【问题描述】：我必须使用tooltipsterjquery在工具提示中使用绑定html。但我必须在工具提示中绑定更多数据。如何使... 查看详情
带有 angular-ui 引导的响应式下拉导航栏（以正确的角度方式完成）
】带有angular-ui引导的响应式下拉导航栏（以正确的角度方式完成）【英文标题】：Responsivedropdownnavbarwithangular-uibootstrap(doneinthecorrectangularkindofway)【发布时间】：2013-04-2212:38:18【问题描述】：我使用angular-ui-boostrap的模块“ui.bootstr... 查看详情
angular-ui 替换'?'从 facebook oauth 重定向时带有“#”
】angular-ui替换\\\'?\\\'从facebookoauth重定向时带有“#”【英文标题】：angular-uireplace\'?\'with\'#\'onredirectfromfacebookoauthangular-ui替换\'?\'从facebookoauth重定向时带有“#”【发布时间】：2015-07-2705:56:42【问题描述】：我在没有SDK的angularjs中... 查看详情
带有角度材料工具提示的 ag 网格
】带有角度材料工具提示的ag网格【英文标题】：aggridwithangularmaterialtooltip【发布时间】：2019-04-2007:43:40【问题描述】：需要信息才能使用带有ag网格的mat工具提示，因为能够通过普通工具提示使用valueFormatter:this.tooltipFormatter,toolt... 查看详情
jQuery UI 工具提示不支持 html 内容
...天，我用jQuery1.9.1升级了我所有的jQuery插件。我开始使用带有jquery.ui.1.10.2的jQueryUI工具提示。一切都很好。但是当我在内容中使用HTML标记时（在我应用工具提示的元素的title属性中），我注意到 查看详情
antd 表单项上带有工具提示的图标
】antd表单项上带有工具提示的图标【英文标题】：Iconwithtooltiponantdformitem【发布时间】：2021-05-0610:53:45【问题描述】：我正在使用Antd表单项，我必须放置一个带有工具提示的图标，如下所示：这是我的代码：<Itemlabel=\'Password\'... 查看详情
带有手动触发和选择器选项的引导工具提示
】带有手动触发和选择器选项的引导工具提示【英文标题】：BootstrapTooltipwithmanualtriggerandselectoroption【发布时间】：2014-09-1808:15:46【问题描述】：我有一个动态表，加载了ajax。当我将鼠标悬停在row上时，我想显示一个工具提示，... 查看详情
谷歌图表：带有自定义工具提示的多行
】谷歌图表：带有自定义工具提示的多行【英文标题】：GoogleCharts:multiplelineswithcustomtooltips【发布时间】：2013-12-2504:43:22【问题描述】：我有一个包含多行的GoogleLineChart。这些点不共享相同的X值，因此我必须以某种方式格式化我... 查看详情
工具提示器中的 onclick 事件
...【发布时间】：2018-01-1814:50:00【问题描述】：我正在使用带有HTML内容的工具提示器，并且需要在HTML内容中挂钩元素的onclick。我的代码如下所示：$(\'.groups-tooltip\').tooltipster(contentCloning:true,trigger:\'custom\',interac 查看详情
两个带有 angular-ui/ui-sortable 的连接列表，在一个中禁用占位符，同时在另一个中启用它
】两个带有angular-ui/ui-sortable的连接列表，在一个中禁用占位符，同时在另一个中启用它【英文标题】：twoconnectedlistswithangular-ui/ui-sortable,disableplaceholderinonewhileenablingitintheother【发布时间】：2016-02-2012:20:35【问题描述】：在我的应... 查看详情
带有弹出框/工具提示的 R Shiny valueBox
】带有弹出框/工具提示的RShinyvalueBox【英文标题】：RShinyvalueBoxwithpopover/tooltip【发布时间】：2020-10-1902:16:06【问题描述】：我尝试从shinydashboard为valueBox制作弹出框/工具提示，但到目前为止没有任何效果。我尝试使用shinyBS，例如... 查看详情
在discreteBarChart nvd3.js中自定义带有数据的工具提示内容
】在discreteBarChartnvd3.js中自定义带有数据的工具提示内容【英文标题】：customatooltipContentoftooltipswithdatumindiscreteBarChartnvd3.js【发布时间】：2014-05-0722:45:48【问题描述】：如何使用加载到discreteBarChartnvd3.js中“数据”中的数据自定义... 查看详情
带有 Redux 的 ReactJS 在 SVG 组件上显示引导工具提示
】带有Redux的ReactJS在SVG组件上显示引导工具提示【英文标题】：ReactJSwithReduxshowbootstraptooltiponSVGcomponent【发布时间】：2019-07-0413:38:11【问题描述】：我正在尝试在SVG组件上显示工具提示。对于工具提示，我正在尝试使用reactstap组... 查看详情
在 R 中创建带有工具提示的 pdf
】在R中创建带有工具提示的pdf【英文标题】：CreatepdfwithtooltipsinR【发布时间】：2011-06-0904:08:06【问题描述】：简单问题：有没有办法在pdf文件中从R绘制图形并包含工具提示？【问题讨论】：这可能很有趣：jackman.stanford.edu/blog/?p... 查看详情
显示带有焦点和悬停的 Tooltipster 提示
】显示带有焦点和悬停的Tooltipster提示【英文标题】：ShowingTooltipsterTipWithBothFocus&Hover【发布时间】：2015-04-2509:57:07【问题描述】：我们正在利用tooltipster插件在信息图标上显示工具提示。这在悬停时效果很好。但是我们还需要... 查看详情
悬停时：如何在 Extjs 的 textarea 字段中显示带有复制选项的工具提示
】悬停时：如何在Extjs的textarea字段中显示带有复制选项的工具提示【英文标题】：OnHover:Howtoshowatooltipwithcopyoptionforallurl\'sinsideatextareafieldinExtjs【发布时间】：2019-09-2007:49:00【问题描述】：我是ExtJs的新手，在这里我有一个来自API... 查看详情
带有引导工具提示类型错误的 jQuery Draggable：e.$element 为 null
】带有引导工具提示类型错误的jQueryDraggable：e.$element为null【英文标题】：jQueryDraggablewithBootstrapTooltipTypeError:e.$elementisnull【发布时间】：2018-12-0122:25:06【问题描述】：我有一个可拖动元素（参见代码sn-p并单击图片以添加图钉）... 查看详情
使用带有 TypeScript 的 Bootstrap 和 jQueryUI - 获取 (TS) 重复属性“工具提示”
】使用带有TypeScript的Bootstrap和jQueryUI-获取(TS)重复属性“工具提示”【英文标题】：UsingBootstrap&jQueryUIwithTypeScript-Getting(TS)Duplicateproperty\'tooltip\'【发布时间】：2021-11-0818:25:37【问题描述】：我已经在我的.NETMVC项目中安装了jQuery... 查看详情