Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 16, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/js/tabler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/_docs/form-helpers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
2 changes: 1 addition & 1 deletion src/pages/_docs/tooltips.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/_includes/forms/form-elements-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>