[dev-form-helpers] fix data-content and data-html attributes

tabler · Jan 13, 2021 · 0a4d4ed · 0a4d4ed
1 parent 201a967
commit 0a4d4ed
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/src/js/tabler.js b/src/js/tabler.js
@@ -11,7 +11,7 @@ import './dropdown';
 	tooltipTriggerList.map(function (tooltipTriggerEl) {
 		let options = {
 			delay: {show: 50, hide: 50},
-			html: true,
+			html: tooltipTriggerEl.getAttribute("data-bs-html") === "true" ?? false,
 			placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
 		};
 		return new bootstrap.Tooltip(tooltipTriggerEl, options);
@@ -23,7 +23,7 @@ import './dropdown';
 	popoverTriggerList.map(function (popoverTriggerEl) {
 		let options = {
 			delay: {show: 50, hide: 50},
-			html: popoverTriggerEl.getAttribute('data-bs-html') ?? false,
+			html: popoverTriggerEl.getAttribute('data-bs-html') === "true" ?? false,
 			placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
 		};
 		return new bootstrap.Popover(popoverTriggerEl, options);

diff --git a/src/pages/_docs/form-helpers.md b/src/pages/_docs/form-helpers.md
@@ -10,6 +10,6 @@ menu: docs.components.form-helpers
 Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. 
 
 {% capture code %}
-<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
+<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
 {% endcapture %}
 {% include example.html code=code %}
diff --git a/src/pages/_docs/tooltips.md b/src/pages/_docs/tooltips.md
@@ -32,7 +32,7 @@ Use the default markup to create tooltips that will help users understand partic
 If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
 
 {% capture code %}
-<button type="button" class="btn" data-bs-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
+<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
   Tooltip with HTML
 </button>
 {% endcapture %}

diff --git a/src/pages/_includes/forms/form-elements-1.html b/src/pages/_includes/forms/form-elements-1.html
@@ -60,8 +60,8 @@
 		</div>
 		<div class="col-auto align-self-center">
 			<span class="form-help" data-bs-toggle="popover" data-bs-placement="top"
-			      data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>"
-			      data-html="true">?</span>
+			      data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>"
+			      data-bs-html="true">?</span>
 		</div>
 	</div>
 </div>