Skip to content

Commit 6e7bf66

Browse files
committed
Fix issue #16941 - HTML example in tooltip docs
Added an example tooltip that uses HTML content, and expanded the description of the html option to clarify usage.
1 parent 4354e87 commit 6e7bf66

File tree

1 file changed

+9
-1
lines changed

1 file changed

+9
-1
lines changed

docs/components/tooltips.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ Hover over the buttons below to see their tooltips.
8585
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
8686
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
8787
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
88+
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
8889
</div>
8990
</div>
9091

@@ -101,6 +102,9 @@ Hover over the buttons below to see their tooltips.
101102
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
102103
Tooltip on left
103104
</button>
105+
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
106+
Tooltip with HTML
107+
</button>
104108
{% endhighlight %}
105109

106110
## Usage
@@ -179,7 +183,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
179183
<td>html</td>
180184
<td>boolean</td>
181185
<td>false</td>
182-
<td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
186+
<td>
187+
<p>Allow HTML in the tooltip.</p>
188+
<p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p>
189+
<p>Use text if you're worried about XSS attacks.</p>
190+
</td>
183191
</tr>
184192
<tr>
185193
<td>placement</td>

0 commit comments

Comments
 (0)