uib-tooltip-html not working

13,666

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>!');
Share:
13,666
Marvin
Author by

Marvin

42? Sometimes I do what I want to do. The rest of the time, I do what I have to. (Cicero, Gladiator) No one meets the expectations of what people fantasizes about her / him ( Jean-David Morvan, Merlin -french comics- ) The best things in life: Hot water, good dentishtry, and soft lavatory paper (Cohen the Barbarian)

Updated on June 26, 2022

Comments

  • Marvin
    Marvin almost 2 years

    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?

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