Hi,

I have a strange problem with the jQuery UI tooltip, hopefully someone can help me or point me in the right direction.

HTML-Code:

<p>Lorem ipsum dolor sit amet, <a href="#" title="This is just a meaningless word" data-toggle="tooltip">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

Javascript-Code:

$(document).ready(function () {
   $('[data-toggle="tooltip"]').tooltip();
});

This works as expected. The content of the title attribute is displayed in the tooltip.

But my client wants to have some "richer" tooltips, and I tried to include some HTML code in the title tag.

HTML-Code:

<p>Lorem ipsum dolor sit amet, <a style="background-color: yellow;" data-toggle="tooltip" data-html="true" href="#" title="This is just a meaningless word&lt;br /&gt;It is only blind text.">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

This also works fine, but only using the <br /> tag.

HTML-Code:

<p>Lorem ipsum dolor sit amet, <a data-toggle="tooltip" data-html="true" href="#" title="<ul><li>This is just a meaningless list item.</li><li>This is just another meaningless list item.</li></ul>">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

This results in a tooltip like:

I tried to find some solutions and found this one:

HTML-Code

<p>Lorem ipsum dolor sit amet, <a data-toggle="tooltip" data-tooltip="<ul><li>This is just a meaningless list item.</li><li>This is just another meaningless list item.</li></ul>" data-html="true" href="#" title="This is just a meaningless word.">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

Javascript-Code:

$(document).ready(function () {
   $('[data-toggle="tooltip"]').tooltip({
      content: function(){
         var toolTipText = $(this).attr("title");
         if (typeof $(this).attr("data-tooltip") !== typeof undefined && $(this).attr("data-tooltip") !== false) {
            toolTipText = $(this).attr("data-tooltip");
         }
         return toolTipText;
      }
   });
});

I tried this last one on some static HTML page, also on fiddler and it worked perfectly. But: When I use this in an HTML module in DNN (8.0.4), it always displays the content of the title tag in the tooltip. I tried:

$(document).ready(function () {
   $('[data-toggle="tooltip"]').tooltip({
      content: function(){
         return "Hello world!";
      }
   });
});

but no changes. I suspected the skin (DnnMDesign), but the same effect was on the Xcillion skin.

Any ideas?

Happy DNNing!
Michael