A premium and open source dashboard template with a responsive and high-quality UI. +
+
A premium and open source dashboard template with a responsive and high-quality UI.
+
+
+
+
+
+ 
+
+
+Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful! Show me demo
+
+
## Features
@@ -24,7 +39,6 @@ We've created this admin panel for everyone who wants to create templates based
* **Demo pages**: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
* **Single Page Application versions:** [Tabler React](https://github.com/tabler/tabler-react) has React components for Tabler.
-
## Sponsor Tabler
diff --git a/src/js/tabler.js b/src/js/tabler.js
index f221ae301..0a75e413b 100644
--- 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);
@@ -44,4 +44,9 @@ import './dropdown';
});
});
+ let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'));
+ toastsTriggerList.map(function (toastTriggerEl) {
+ return new bootstrap.Toast(toastTriggerEl);
+ });
+
})();
diff --git a/src/pages/_docs/form-helpers.md b/src/pages/_docs/form-helpers.md
index cc9a2f4b4..8aaf45d50 100644
--- 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 %}
-?
+?
{% endcapture %}
{% include example.html code=code %}
diff --git a/src/pages/_docs/tooltips.md b/src/pages/_docs/tooltips.md
index f311d0607..34980f842 100644
--- 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 %}
-