uib-tooltip-html not working

uib-tooltip line break
bootstrap tooltip html
angularjs modal
bootstrap angular
angular ui
angularjs bootstrap datepicker
toggleopen
bootstrap tooltip on click

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.

Basicely, the 'tooltip' works when the 'tooltip-html' does not:

<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

And since ui-bootstrap doc lacks example regarding this directive, I cannot guess what I am doing wrong.

Any idea?

The example of the documentation of version 0.14 definitely shows how to use it. Excerpts:

HTML:

I can even contain HTML. <a href="#" uib-tooltip-html="htmlTooltip">Check me out!</a>

JS:

$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

The latest doc also 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:

$scope.dynamicTooltipText = 'dynamic';
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

uib-tooltip-html is broken · Issue #4738 · angular-ui/bootstrap · GitHub, This does work (notice single quotes):. <span uib-tooltip-html="'<p>{{somevar}}</​p>'">Hover</span>. What the heck? Isn't that completely  The issue was actually that I was using uib-tooltip-html="{{myVar}}" rather than uib-tooltip-html="myVar". Your example helped me figure it out. You may want to add an uib-tooltip-html example to the documentation to make the usage clearer for others. Thanks again.

I had to do it like this (thanks to Herbi Shtini for pointing out the single quotation mark hack)

viewModel.tooltipContent = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

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

Demostration of broken uib-tooltip-html, DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"/> <title>uib-​tooltip-html test</title> <link  Bug description: When the content expression of uib-tooltip-html is updated, the tooltip content isn't updated. Link to minimally-working plunker that reproduces the issue:

Hey try like this i get html mix tool tip using ubi-tooltip given below

In JS.

app.controller("yoyoController", function($scope, $sce) {
    $scope.text = $sce.trustAsHtml('Yo <b>Yo</b>');
});

In HTML

<div ng-controller="yoyoController">
    <p uib-tooltip-html="text" >
        A Thing With an HTML Tooltip
    </p>
</div>

uib-tooltip-html not working - angularjs, 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. I use tooltip-html-unsafe in our code. Now I get a deprecation warning: tooltip-html-unsafe is now deprecated. Use tooltip-html or tooltip-template instead. The results are still fine, but I thought I give tooltip-html a try.

Uib-tooltip with html unsafe - angularjs, I have a problem with my tooltip. I have something like this <span uib-tooltip="{{​displayName()}}"></span> and in js file function displayName() { return '<div>' +  @cyrilgandon, I'm not sure what your issue is, both of those plunkers are working correctly. uib-popover-html assumes the attribute value is HTML and treats it as such (note that the onus is on the developer to determine that the HTML is safe to render), whereas the uib-popover-template attribute takes the path of an HTML template.

Angular directives for Bootstrap, FAQ. Please check our FAQ section for common problems / solutions. template​-url (Default: uib/template/accordion/accordion-group.html ) - Add the ability to override the To use tooltips or popovers on elements within a btn-group , set the  If you test with Firefox, it will not work, no matter which character you're taking as a line break. Firefox replaces all characters for line breaks such as \r or \r with a space. The HTML tag <br> you can not use at all, because this only works in the HTML area as a line break.

ui.bootstrap.tooltip, FAQ. Please check our FAQ section for common problems / solutions. template​-url (Default: uib/template/accordion/accordion-group.html ) - Add the ability to  AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip: uib-tooltip, uib-tooltip-template and uib-tooltip-html - uib-tooltip takes only text and will escape any HTML provided - uib-tooltip-html takes an expression that evaluates to an HTML string - uib-tooltip-template takes a text that specifies the location of the template

Comments
  • You're definitely write, and am definitely ashamed of my poor reading skills (don't say "lazynness"!). Thanks for your help!
  • Adding single quotation mark after the doubled ones did the job for me. Thanks