4

Hopefully the intention isn't overly skewed...

I'm trying to set a variable with some html value using jstl, and afterwards display it in a bootstrap tooltip. The html is static and quite short, so I don't want to bother about sending the value to jsp as an attribute from any Servlet. So basically it looks as follows;

<c:set var="passMsg" value="myHtmlString"/>
<div class="form-group">
    <input data-rel="tooltip" data-toggle="tooltip" title="${passMsg}" data-placement="top" class="form-control" name="password" type="password"/>
</div>

I've tried this (haha! not so intuitive, but hey! it was a cheap shot);

<c:set var="passMsg" value="<p>Passwords must contain <br>at least One Uppercase character <br>& One digit.</p>"/>

...and tried body content for the <c:set/> tag;

<c:set var="passMsg">
    <p>Passwords must contain <br>at least One Uppercase character <br>& One digit.</p>
</c:set>

...and to leverage upon XML-escaping capability of the <c:out/> tag, I also tried this;

<c:set var="passMsg">
    <c:out value="<p>Passwords must contain <br>at least One Uppercase character <br>& One digit.</p>"/>
</c:set>

Unfortunately, my tooltip keeps showing the string with tags included as this;

<p>Passwords must contain <br>at least One Uppercase character <br>& One digit.</p>

whereas what I want is for it to look like this;

Passwords must contain
at least One Uppercase character
& One digit.

SourceVisor
  • 1,868
  • 1
  • 27
  • 43

1 Answers1

0

You need to enable html mode for the tooltip:

data-html="true"

See the documentation

JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • Thanks for the tip and +1 for the documentation reference. However I tried this and still didn't get the desired result. Any ideas why though? – SourceVisor Jun 03 '15 at 10:17
  • See http://jsfiddle.net/44khF/200/: it works. Try doing it with static HTML in the tooltip, the try doing it with dynamic HTML. Check the generated HTML code to see if it's similar to the static code. – JB Nizet Jun 03 '15 at 10:56
  • Ok got it working... turns out I didn't add the javascript for triggering the tooltip like `$('[data-toggle="tooltip"]').tooltip()`... I kinda forgot that Bootstrap documentation says "For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself"... I'm marking this as the correct answer. – SourceVisor Jun 03 '15 at 11:12
  • For a bit of knowledge seeking though, @JBNizet, do you know why the default tooltip was showing (and it was not rendering the html properly) even though I hadn't initially added the javascript that should trigger it? – SourceVisor Jun 03 '15 at 11:23
  • It probably was not shown. What you saw was a standard, unstyled native title, created by the browser and not by bootstrap. – JB Nizet Jun 03 '15 at 11:27