From d21b8314dc748c33484c4046820b04b16fefc90c Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 19 May 2025 16:09:30 +0200 Subject: [PATCH 01/24] refactor(Nav): enhance the styling of buttons when they are disabled --- scss/_nav.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index 8d7dc4c32..291ce6fc9 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -231,7 +231,8 @@ border: var(--#{$prefix}nav-enclosed-link-border-width) solid transparent; @include border-radius(calc(var(--#{$prefix}nav-enclosed-border-radius) - var(--#{$prefix}nav-enclosed-padding))); - &.disabled { + &.disabled, + &:disabled { color: var(--#{$prefix}nav-enclosed-link-disabled-color); } } From 22edce55841679278b0428a8a90cc5ceb71f7914 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 3 Jun 2025 15:53:12 +0200 Subject: [PATCH 02/24] docs: update readme --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 1b97f4ba6..c9c562d35 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,9 @@

CoreUI

- Open Source UI Components Library built on top of Bootstrap 5. + An advanced UI library based on Bootstrap 5 – CoreUI extends Bootstrap with modular architecture, PRO components, and ready-to-use admin templates for React, Angular, Vue, and more.
- Explore CoreUI docs » + Explore CoreUI docs »

Report bug @@ -84,15 +84,18 @@ Read the [Getting started page](https://coreui.io/docs/getting-started/introduct - [Bootstrap Navbar](https://coreui.io/bootstrap/docs/components/navbar/) - [Bootstrap Offcanvas](https://coreui.io/bootstrap/docs/components/offcanvas/) - [Bootstrap Pagination](https://coreui.io/bootstrap/docs/components/pagination/) +- [Bootstrap Password Input](https://coreui.io/bootstrap/docs/forms/password-input/) **PRO** - [Bootstrap Placeholder](https://coreui.io/bootstrap/docs/components/placeholder/) - [Bootstrap Popover](https://coreui.io/bootstrap/docs/components/popover/) - [Bootstrap Progress](https://coreui.io/bootstrap/docs/components/progress/) - [Bootstrap Radio](https://coreui.io/bootstrap/docs/forms/radio/) - [Bootstrap Range](https://coreui.io/bootstrap/docs/forms/range/) +- [Bootstrap Range Slider](https://coreui.io/bootstrap/docs/forms/range-slider/) **PRO** - [Bootstrap Rating](https://coreui.io/bootstrap/docs/forms/rating/) **PRO** - [Bootstrap Select](https://coreui.io/bootstrap/docs/forms/select/) - [Bootstrap Sidebar](https://coreui.io/bootstrap/docs/components/sidebar/) - [Bootstrap Spinner](https://coreui.io/bootstrap/docs/components/spinner/) +- [Bootstrap Stepper](https://coreui.io/bootstrap/docs/forms/stepper/) **PRO** - [Bootstrap Switch](https://coreui.io/bootstrap/docs/forms/switch/) - [Bootstrap Table](https://coreui.io/bootstrap/docs/content/tables/) - [Bootstrap Textarea](https://coreui.io/bootstrap/docs/forms/textarea/) From 7d12b88ff9dd8ab3396aaa1156029ff1d1295db4 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 3 Jun 2025 15:53:57 +0200 Subject: [PATCH 03/24] docs: update readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c9c562d35..5c21f9dcf 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@

CoreUI

- An advanced UI library based on Bootstrap 5 – CoreUI extends Bootstrap with modular architecture, PRO components, and ready-to-use admin templates for React, Angular, Vue, and more. + An advanced UI library based on Bootstrap 5 – CoreUI extends Bootstrap with PRO components, and ready-to-use admin templates for React, Angular, Vue, and more.
Explore CoreUI docs »
From b74ff6acf6ec7aea6eeabbb491279bd31150aa21 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 16 Jun 2025 13:31:41 +0200 Subject: [PATCH 04/24] docs: improve documenatation --- docs/content/components/alerts.md | 124 ++++++----- docs/content/components/tooltips.md | 198 +++++++++--------- .../partials/callouts/danger-async-methods.md | 4 +- .../callouts/info-prefersreducedmotion.md | 2 +- .../partials/callouts/info-sanitizer.md | 2 +- .../warning-color-assistive-technologies.md | 2 +- .../warning-data-bs-title-vs-title.md | 2 +- docs/layouts/partials/js-data-attributes.md | 4 +- docs/layouts/shortcodes/markdown.html | 2 +- 9 files changed, 179 insertions(+), 161 deletions(-) diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md index 56e690743..4d6a18f3f 100644 --- a/docs/content/components/alerts.md +++ b/docs/content/components/alerts.md @@ -10,13 +10,13 @@ other_frameworks: alert ## Examples -Bootstrap alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing). +Bootstrap alerts can accommodate text of any length and feature an optional close button. To style an alert, apply one of the required contextual classes (e.g., .alert-success). For inline dismissal, utilize the [alerts JavaScript plugin](#dismissing). {{< example >}} {{< alerts.inline >}} {{- range (index $.Site.Data "theme-colors") }}

{{- end -}} {{< /alerts.inline >}} {{< /example >}} @@ -27,51 +27,51 @@ Bootstrap alert is prepared for any length of text, as well as an optional close ### Live example -Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button. +Click the button below to show an alert (initially hidden with inline styles), then dismiss (and destroy) it using the built-in close button. {{< example stackblitz_add_js="true" >}}
- + {{< /example >}} -We use the following JavaScript to trigger our live alert demo: - +The JavaScript below initiates our live alert demo: {{< js-docs name="live-alert" file="docs/assets/js/partials/snippets.js" >}} ### Link color -Use the `.alert-link` utility class to immediately give matching colored links inside any alert. - +Utilize the `.alert-link` utility class to instantly create matching colored links within any alert. {{< example >}} {{< alerts.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{ end -}} {{< /alerts.inline >}} {{< /example >}} ### Additional content -Alert can also incorporate supplementary HTML elements like heading, paragraph, and divider. +Bootstrap alerts can also include additional HTML elements such as headings, paragraphs, and dividers. {{< example >}} {{< /example >}} ### Icons -Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) and [Bootstrap Icons]({{< param icons >}}) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles. +In a similar vein, you can utilize [flexbox utilities]({{< docsref "/utilities/flex" >}}) and [CoreUI Icons]({{< param icons >}}) for crafting alerts that include icons. Based on your choice of icons and the content involved, you might consider incorporating additional utilities or custom styling. {{< example >}} {{< /example >}} {{< callout warning >}} -When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.coreui.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element. +When the Bootstrap alert is dismissed, it is fully removed from the page structure. If a keyboard user closes the alert using the close button, their focus may be unexpectedly lost, and depending on the browser, it might be reset to the beginning of the page or document. Therefore, we recommend implementing additional JavaScript that listens for the `closed.coreui.alert` event and programmatically sets `focus()` to the most suitable location on the page. If you plan to move focus to a typically non-interactive element, ensure you add `tabindex="-1"` to that element. {{< /callout >}} ## JavaScript behavior @@ -148,7 +168,7 @@ When an alert is dismissed, the element is completely removed from the page stru ### Initialize -Initialize elements as alerts +Set up elements as Bootstrap alerts ```js const alertList = document.querySelectorAll('.alert') @@ -156,7 +176,7 @@ const alerts = [...alertList].map(element => new coreui.Alert(element)) ``` {{< callout info >}} -For the sole purpose of dismissing an alert, it isn't necessary to initialize the component manually via the JS API. By making use of `data-coreui-dismiss="alert"`, the component will be initialized automatically and properly dismissed. +To solely dismiss the Bootstrap alert, you do not need to manually initialize the component via the JS API. By using `data-coreui-dismiss="alert"`, the component will initialize automatically and dismiss properly. See the [triggers](#triggers) section for more details. {{< /callout >}} @@ -169,21 +189,21 @@ See the [triggers](#triggers) section for more details. ### Methods -You can create an alert instance with the alert constructor, for example: +You can create an alert instance using the alert constructor, for example: ```js const cAlert = new coreui.Alert('#myAlert') ``` -This makes an alert listen for click events on descendant elements which have the `data-coreui-dismiss="alert"` attribute. (Not necessary when using the data-api’s auto-initialization.) +This sets up an alert to listen for click events on descendant elements that have the `data-coreui-dismiss="alert"` attribute. (Not necessary when using the data-api’s auto-initialization.) {{< bs-table >}} | Method | Description | | --- | --- | -| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. | -| `dispose` | Destroys an element's alert. (Removes stored data on the DOM element) | -| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element. For example: `coreui.Alert.getInstance(alert)`. | -| `getOrCreateInstance` | Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `coreui.Alert.getOrCreateInstance(element)`. | +| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before being removed. | +| `dispose` | Destroys an element's alert and removes any stored data associated with the DOM element. | +| `getInstance` | A static method that allows you to retrieve the alert instance linked to a DOM element. For example: `coreui.Alert.getInstance(alert)`. | +| `getOrCreateInstance` | A static method that returns the alert instance associated with a DOM element or creates a new one if it hasn't been initialized. You can use it as follows: `coreui.Alert.getOrCreateInstance(element)`. | {{< /bs-table >}} Basic usage: @@ -200,8 +220,8 @@ CoreUI for Bootstrap's alert plugin exposes a few events for hooking into alert {{< bs-table >}} | Event | Description | | --- | --- | -| `close.coreui.alert` | Fires immediately when the `close` instance method is called. | -| `closed.coreui.alert` | Fired when the alert has been closed and CSS transitions have completed. | +| `close.coreui.alert` | Triggers immediately when the `close` instance method is invoked. | +| `closed.coreui.alert` | Triggered when the alert has been closed and CSS transitions have finished. | {{< /bs-table >}} ```js @@ -217,7 +237,7 @@ myAlert.addEventListener('closed.coreui.alert', event => { ### CSS variables -Alerts use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. +Our Bootstrap alerts utilize local CSS variables on `.alert` for improved real-time customization. The values for the CSS variables are set using Sass, ensuring that Sass customization remains supported as well. {{< scss-docs name="alert-css-vars" file="scss/_alert.scss" >}} @@ -229,12 +249,12 @@ Alerts use local CSS variables on `.alert` for enhanced real-time customization. {{< deprecated-in "4.3.0" >}} -Used in combination with `$alert-variants` to create contextual modifier classes for our alerts. +Used alongside `$alert-variants` to create contextual modifier classes for our alerts. {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} ### SASS loop -Loop that generates the modifier classes with the `alert-variant()` mixin. +Loop that creates the modifier classes with the `alert-variant()` mixin. {{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} diff --git a/docs/content/components/tooltips.md b/docs/content/components/tooltips.md index c07707ae2..011359d59 100644 --- a/docs/content/components/tooltips.md +++ b/docs/content/components/tooltips.md @@ -1,7 +1,7 @@ --- layout: docs title: Tooltips -description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-coreui-attributes for local title storage. +description: Use Bootstrap Tooltips to add small, informative text boxes that appear when users hover or focus on an element. This feature enhances UX by providing contextual help without cluttering your interface. group: components toc: true bootstrap: true @@ -10,17 +10,19 @@ other_frameworks: tooltip ## Overview -Things to know when using the tooltip plugin: +Things to keep in mind when using the Bootstrap tooltip plugin: -- Tooltips rely on the 3rd party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before coreui.js or use `coreui.bundle.min.js` / `coreui.bundle.js` which contains Popper in order for tooltips to work! -- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**. -- Tooltips with zero-length titles are never displayed. -- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). -- Triggering tooltips on hidden elements will not work. -- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element. -- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your ``s to avoid this behavior. -- Tooltips must be hidden before their corresponding elements have been removed from the DOM. -- Tooltips can be triggered thanks to an element inside a shadow DOM. +- Our Bootstrap tooltips depend on the third-party library [Popper](https://popper.js.org/) for positioning. You need to include [popper.min.js]({{< param "cdn.popper" >}}) before `coreui.js` or use `coreui.bundle.min.js/coreui.bundle.js`, which includes Popper to ensure tooltips function correctly! +- Tooltips are optional for performance reasons, so you need to initialize them yourself. +- Bootstrap Tooltips with empty titles are never displayed. +- Specify `container: 'body'` to prevent rendering issues in more complex components (such as our input groups, button groups, etc.). +- Bootstrap tooltips cannot be triggered on hidden elements. +- Tooltips for elements that are `.disabled` or `disabled` need to be activated on a wrapper element. +- When triggered by hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `` elements to avoid this behavior. +- Tooltips must be hidden before the related elements are removed from the DOM. +- Our Bootstrap tooltips can be triggered thanks to an element inside a shadow DOM. + +Got all that? Awesome! Now, let's explore how they work through some examples. {{< callout info >}} {{< partial "callouts/info-sanitizer.md" >}} @@ -34,9 +36,9 @@ Got all that? Great, let's see how they work with some examples. ## Examples -### Enable tooltips +### Enable Bootstrap tooltips -One way to initialize all tooltips on a page would be to select them by their `data-coreui-toggle` attribute: +You can enable tooltips using JavaScript or data attributes. Here's how to initialize all tooltip elements on a page: ```js const tooltipTriggerList = document.querySelectorAll('[data-coreui-toggle="tooltip"]') @@ -45,10 +47,11 @@ const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new coreui.T ### Tooltips on links -Hover over the links below to see tooltips: +Hover your cursor over the links below to see tooltips:
-

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project. +

+ Sample text to illustrate inline links accompanied by tooltips. This serves purely as filler, lacking substance. The content here merely simulates genuine text presence. All of this is to demonstrate how tooltips would appear in actual scenarios. Hopefully, you have now observed how these link tooltips function effectively in practice, ready to be used on your own website or project.

@@ -60,13 +63,12 @@ Hover over the links below to see tooltips: {{< added-in "4.2.0" >}} -You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-coreui-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable. +Feel free to personalize the look of your tooltips with [CSS variables](#variables)! By setting a custom class using `data-coreui-custom-class="custom-tooltip"`, you can easily define your custom style and use it to adjust a local CSS variable. {{< scss-docs name="custom-tooltip" file="docs/assets/scss/_component-examples.scss" >}} - {{< example class="tooltip-demo" stackblitz_add_js="true" >}} - {{< /example >}} -### Directions +### Positioning -Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL. +Bootstrap Tooltips support multiple placements: top, right, bottom, and left. The default is top. Directions are mirrored when using CoreUI in RTL. To change placement, use the `data-coreui-placement` attribute: -
-
- - - - - -
-
+{{< example class="tooltip-demo" >}} + + + + +{{< /example >}} -```html - - - - -``` +### Tooltips with HTML Content -And with custom HTML added: +Bootstrap Tooltips support HTML content, allowing you to insert styled elements like ``, ``, or `` directly inside the tooltip. This feature is useful when you want to emphasize certain words, add inline formatting, or even insert icons. -```html - -``` +{{< /example >}} -With an SVG: +This will render a styled tooltip that interprets the HTML tags instead of treating them as plain text. HTML tooltips are especially handy when you need richer formatting within a compact UI hint. -
- - - - - - -
+### Tooltips on SVG Elements + +Applying Bootstrap Tooltips to SVG elements requires a different approach, since SVGs do not support the `title` attribute in the same way HTML elements do. To show tooltips on SVG icons or shapes, you must initialize them manually using JavaScript. + +It’s recommended to set the container option to `'body'` to avoid positioning issues, especially when SVGs are nested inside complex layouts. + +{{< example class="tooltip-demo" >}} + + + + + + +{{< /example >}} + +Using Bootstrap Tooltips with SVGs is a great way to enhance accessibility and interactivity for icon-based UIs or data visualizations without modifying the structure of your SVGs. ## Usage {{< bootstrap-compatibility >}} -The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. +The tooltip plugin creates content and markup as needed, and by default places tooltips following their trigger elements. Trigger the tooltip via JavaScript: @@ -138,7 +134,7 @@ const tooltip = new coreui.Tooltip(exampleEl, options) {{< callout warning >}} ##### Overflow `auto` and `scroll` -Tooltip position attempts to automatically change when a **parent container** has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve this, set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`: +When a parent container has `overflow: auto` or `overflow: scroll`, such as with our `.table-responsive`, the tooltip position attempts to adjust automatically while maintaining its original placement. To fix this, set the boundary option in the flip modifier using the `popperConfig` option to any HTMLElement to replace the default value, `'clippingParents'`, like `document.body`: ```js const tooltip = new coreui.Tooltip('#example', { @@ -149,12 +145,12 @@ const tooltip = new coreui.Tooltip('#example', { ### Markup -The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin). +The markup needed for a tooltip consists solely of a `data` attribute and a `title` on the HTML element you want to display a tooltip. The markup generated for a tooltip is quite simple, although it does require a position, which is set to `top` by default in the plugin. {{< callout warning >}} ##### Making tooltips work for keyboard and assistive technology users -You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as ``s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users. +Only add tooltips to HTML elements that are inherently keyboard-focusable and interactive, like links or form controls. While it is possible to make arbitrary HTML elements like ``s focusable by using the `tabindex="0"` attribute, doing so may create confusing tab stops on non-interactive elements for keyboard users. Moreover, most assistive technologies typically do not announce tooltips in these cases. Additionally, avoid depending solely on `hover` to trigger your tooltips, as this approach renders them inaccessible for keyboard users. {{< /callout >}} ```html @@ -172,15 +168,13 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo ### Disabled elements -Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `
` or ``, ideally made keyboard-focusable using `tabindex="0"`. +Elements that have the `disabled` attribute are non-interactive, which prevents users from focusing, hovering, or clicking on them to display a tooltip (or popover). To address this, consider triggering the tooltip from a surrounding `
` or ``, preferably making it keyboard-focusable by using `tabindex="0"`. -
-{{< example >}} +{{< example class="tooltip-demo" >}} {{< /example >}} -
### Options @@ -189,32 +183,34 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot {{< /markdown >}} {{< callout warning >}} -Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. +Please note that for security reasons, the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied via data attributes. {{< /callout >}} - {{< bs-table "table" >}} + | Name | Type | Default | Description | | --- | --- | --- | --- | -| `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip | -| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. | -| `delay` | number, object | `0` | Delay showing and hiding the tooltip (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. | -| `html` | boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip's `title` will be rendered in the tooltip. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. | -| `placement` | string, function | `'top'` | How to position the tooltip: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance. | -| `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. | -| `template` | string | `''` | Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. | -| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | -| `customClass` | string, function | `''` | Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. | -| `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. | -| `offset` | array, string, function | `[0, 6]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-coreui-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). | -| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements. | -| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). | -| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. | -| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. | -| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. | -| `popperConfig` | null, object, function | `null` | To change CoreUI for Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the CoreUI for Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.| +| `allowList` | object | [Default value](/getting-started/javascript#sanitizer) | Defines the set of permitted HTML tags and attributes that can safely appear in the tooltip content when HTML rendering is enabled. This helps maintain control over the output and prevent injection of malicious code. | +| `animation` | boolean | `true` | Determines whether the tooltip should fade in and out using a CSS transition. Set to `false` for instant show/hide behavior, which may be preferable for performance-sensitive interfaces. | +| `container` | string, element, false | `false` | Specifies the parent container in which the tooltip should be inserted. Commonly used value is `'body'`, which helps avoid layout or overflow issues by ensuring the tooltip isn't clipped by parent elements. | +| `delay` | number, object | `0` | Defines how long (in milliseconds) to wait before showing or hiding the tooltip. A single number applies to both actions, or you can provide an object like `{ show: 500, hide: 200 }` for separate control over each. | +| `html` | boolean | `false` | Enables support for HTML content inside the tooltip. When set to `true`, the `title` attribute may include tags like ``, ``, or even icons. Be cautious with untrusted content as it increases XSS risk. | +| `placement` | string, function | `'top'` | Sets the tooltip’s position relative to its target element. Valid values include `'top'`, `'bottom'`, `'left'`, `'right'`, or `'auto'`. You can also pass a function for dynamic placement based on element size or context. | +| `selector` | string, false | `false` | Used to delegate tooltip activation to child elements within a container. This is particularly useful when you’re dynamically adding elements to the DOM that require tooltips. Note: the `title` attribute itself should not be used as a selector. | +| `template` | string | `''` | Provides the HTML structure used to generate the tooltip. You can override it to include custom classes or elements. The `title` content is placed inside `.tooltip-inner`, and `.tooltip-arrow` is the visual pointer. | +| `title` | string, element, function | `''` | The content displayed inside the tooltip. If a value is not provided, the component will fall back to the `title` attribute on the element. You can also provide a function that returns the content dynamically.| +| `customClass` | string, function | `''` | Allows adding one or more custom CSS classes to the tooltip when it's rendered. Accepts a string with class names or a callback function that returns the class string. Useful for styling variants (e.g. light vs dark). | +| `trigger` | string | `'hover focus'` | Determines which user interactions will cause the tooltip to show. Options include `click`, `hover`, `focus`, or `manual`. Multiple triggers can be combined using a space-separated string. Use `manual` for full programmatic control. | +| `offset` | array, string, function | `[0, 6]` | Defines how far the tooltip should be offset from the target element. Use a string like `data-coreui-offset="10,20"` in attributes or pass a function to calculate the offset based on context. Popper.js modifiers are used under the hood. | +| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Specifies alternative placements for the tooltip if the preferred one isn't feasible (e.g., due to lack of space). The tooltip will try these placements in order until one fits. For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). | +| `boundary` | string, element | `'clippingParents'` | Determines the boundary within which the tooltip must remain visible. Can be a specific element or one of Popper’s keywords like `'viewport'` or `'window'`. This setting helps avoid unwanted clipping or overflow. For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). | +| `sanitize` | boolean | `true` | Controls whether HTML content in the tooltip should be sanitized before rendering. Strongly recommended to leave enabled unless you’re fully managing the content and trust its source. | +| `allowList` | object | \[Default value]\({{< docsref "/getting-started/javascript#sanitizer" >}}) | A detailed whitelist of tags and attributes considered safe when sanitization is enabled. This fine-tunes what HTML will be kept or stripped from the tooltip. | +| `sanitizeFn` | null, function | `null` | You can define your own custom sanitization logic by passing a function here. Ideal if you want to use a specialized HTML sanitizer or integrate with existing security tools. If activated `'template'`, `'content'` and `'title'` options will be sanitized. | +| `popperConfig` | null, object, function | `null` | Allows you to override or extend the default Popper.js configuration used by Bootstrap Tooltip. Can be an object or a function that receives the default config and returns a modified one, giving you full control over tooltip behavior and positioning logic. See [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options).| {{< /bs-table >}} + {{< callout info >}} #### Data attributes for individual tooltips @@ -242,17 +238,18 @@ const tooltip = new coreui.Tooltip(element, { {{< bs-table "table" >}} | Method | Description | | --- | --- | -| `show` | Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.coreui.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed. | -| `hide` | Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.coreui.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. | -| `toggle` | Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.coreui.tooltip` or `hidden.coreui.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. | -| `dispose` | Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. | -| `enable` | Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.** | -| `disable` | Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled. | -| `setContent` | Gives a way to change the tooltip's content after its initialization. | -| `toggleEnabled` | Toggles the ability for an element's tooltip to be shown or hidden. | -| `update` | Updates the position of an element's tooltip. | -| `getInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized | -| `getOrCreateInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized | +| `show` | Manually displays the Bootstrap tooltip linked to an element. This method is non-blocking—it returns immediately, even though the tooltip will appear shortly after. If the tooltip’s title is empty, nothing will be shown. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.coreui.tooltip` event occurs) | +| `hide` | Hides the tooltip from view when triggered programmatically. Similar to `show`, this method is asynchronous and returns before the hiding animation finishes. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.coreui.tooltip` event occurs). | +| `toggle` | Programmatically shows or hides a tooltip based on its current visibility state. Like `show` and `hide`, this method executes immediately and the visual change happens afterward. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.coreui.tooltip` or `hidden.coreui.tooltip` event occurs). | +| `dispose` | Completely removes the tooltip instance from the target element. It clears event listeners and internal data. Tooltips created using delegation (e.g., via `selector`) cannot be destroyed on individual children. | +| `enable` | Gives an element’s tooltip the ability to be shown. All tooltips are enabled by default unless manually disabled. | +| `disable` | Disables the tooltip from being triggered. This includes both manual and automatic triggers until it's enabled again. | +| `setContent` | Dynamically changes the content of an existing tooltip without reinitializing the instance. Useful for updating text based on user action or application state. | +| `toggleEnabled` | Switches the ability for an element’s tooltip to be shown or hidden. | +| `update` | Recalculates and repositions the tooltip, ensuring correct alignment if the DOM has changed (e.g., due to scroll, resize, or dynamic layout updates). | +| `getInstance` | *Static* method that retrieves the current tooltip instance tied to a specific element. Returns `null` if the tooltip has not been initialized. | +| `getOrCreateInstance` | *Static* method that either returns the existing tooltip instance or initializes a new one if none exists. Ensures consistent behavior in dynamic interfaces. | + {{< /bs-table >}} ```js @@ -272,13 +269,14 @@ The `setContent` method accepts an `object` argument, where each property-key is {{< bs-table >}} | Event | Description | | --- | --- | -| `show.coreui.tooltip` | This event fires immediately when the `show` instance method is called. | -| `shown.coreui.tooltip` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). | -| `hide.coreui.tooltip` | This event is fired immediately when the `hide` instance method has been called. | -| `hidden.coreui.tooltip` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). | -| `inserted.coreui.tooltip` | This event is fired after the `show.coreui.tooltip` event when the tooltip template has been added to the DOM. | +| `show.coreui.tooltip` | Triggered right after the `show()` method is invoked. The tooltip is about to become visible, but hasn't been inserted into the DOM yet. You can use this event to perform actions before the tooltip is rendered. | +| `shown.coreui.tooltip` | Fired after the tooltip is fully visible and any CSS transitions (like fade) have completed. Useful for tracking when the user can actually see the Bootstrap tooltip. | +| `hide.coreui.tooltip` | Emitted immediately when the `hide()` method is called. At this point, the tooltip is still visible but is beginning the process of being hidden. | +| `hidden.coreui.tooltip` | Dispatched once the tooltip has been fully removed from view and CSS transitions (if any) have finished. Ideal for cleanup logic or analytics. | +| `inserted.coreui.tooltip` | Occurs after the tooltip has been injected into the DOM but before it becomes visible. This event gives you access to the generated tooltip element for advanced DOM manipulation. | {{< /bs-table >}} + ```js const myTooltipEl = document.getElementById('myTooltip') const tooltip = coreui.Tooltip.getOrCreateInstance(myTooltipEl) @@ -294,7 +292,7 @@ tooltip.hide() ### CSS variables -Tooltips use local CSS variables on `.tooltip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. +Bootstrap tooltips utilize local CSS variables on `.tooltip` for improved real-time customization. The values for the CSS variables are configured via Sass, ensuring that Sass customization is still supported as well. {{< scss-docs name="tooltip-css-vars" file="scss/_tooltip.scss" >}} diff --git a/docs/layouts/partials/callouts/danger-async-methods.md b/docs/layouts/partials/callouts/danger-async-methods.md index d19849bff..f66d6a7c0 100644 --- a/docs/layouts/partials/callouts/danger-async-methods.md +++ b/docs/layouts/partials/callouts/danger-async-methods.md @@ -1,5 +1,5 @@ #### Asynchronous methods and transitions -All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**. +All our API methods are **asynchronous** and initiate a **transition**. They return to the caller as soon as the transition begins but **before it concludes**. Furthermore, a method call on a **transitioning component will be ignored**. -[See our JavaScript documentation for more information](/getting-started/javascript/#asynchronous-functions-and-transitions). +[Refer to our JavaScript documentation for further details](/getting-started/javascript/#asynchronous-functions-and-transitions). diff --git a/docs/layouts/partials/callouts/info-prefersreducedmotion.md b/docs/layouts/partials/callouts/info-prefersreducedmotion.md index f66036ac9..71fc18a4a 100644 --- a/docs/layouts/partials/callouts/info-prefersreducedmotion.md +++ b/docs/layouts/partials/callouts/info-prefersreducedmotion.md @@ -1 +1 @@ -The animation effect of this component is dependent on the `prefers-reduced-motion` media query. See the [reduced motion section of our accessibility documentation](/getting-started/accessibility/#reduced-motion). +This component's animation effect relies on the `prefers-reduced-motion` media query. For more information, refer to the [reduced motion section of our accessibility documentation](/getting-started/accessibility/#reduced-motion). diff --git a/docs/layouts/partials/callouts/info-sanitizer.md b/docs/layouts/partials/callouts/info-sanitizer.md index 1b38c7a04..06377b0ca 100644 --- a/docs/layouts/partials/callouts/info-sanitizer.md +++ b/docs/layouts/partials/callouts/info-sanitizer.md @@ -1 +1 @@ -By default, this component uses the built-in content sanitizer, which strips out any HTML elements that are not explicitly allowed. See the [sanitizer section in our JavaScript documentation](/getting-started/javascript/#sanitizer) for more details. +By default, this component utilizes the built-in content sanitizer, which removes any HTML elements that are not explicitly allowed. Refer to the [sanitizer section in our JavaScript documentation](/getting-started/javascript/#sanitizer) for more details. \ No newline at end of file diff --git a/docs/layouts/partials/callouts/warning-color-assistive-technologies.md b/docs/layouts/partials/callouts/warning-color-assistive-technologies.md index 35683281d..ca767e54e 100644 --- a/docs/layouts/partials/callouts/warning-color-assistive-technologies.md +++ b/docs/layouts/partials/callouts/warning-color-assistive-technologies.md @@ -1,3 +1,3 @@ ##### Conveying meaning to assistive technologies -Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class. +Relying on color to convey meaning creates a visual cue that assistive technologies, like screen readers, cannot perceive. It's essential that any information represented by color is either apparent from the content itself (e.g., the visible text) or supplemented by alternative methods, such as extra text using the `.visually-hidden` class. diff --git a/docs/layouts/partials/callouts/warning-data-bs-title-vs-title.md b/docs/layouts/partials/callouts/warning-data-bs-title-vs-title.md index 015d0fa01..ac833bfde 100644 --- a/docs/layouts/partials/callouts/warning-data-bs-title-vs-title.md +++ b/docs/layouts/partials/callouts/warning-data-bs-title-vs-title.md @@ -1 +1 @@ -Feel free to use either `title` or `data-coreui-title` in your HTML. When `title` is used, Popper will replace it automatically with `data-coreui-title` when the element is rendered. +You can choose to use either `title` or `data-coreui-title` in your HTML. If you opt for `title,` Popper will automatically change it to `data-coreui-title` upon rendering the element. \ No newline at end of file diff --git a/docs/layouts/partials/js-data-attributes.md b/docs/layouts/partials/js-data-attributes.md index c036cd9f7..2208d0d0b 100644 --- a/docs/layouts/partials/js-data-attributes.md +++ b/docs/layouts/partials/js-data-attributes.md @@ -1,3 +1,3 @@ -As options can be passed via data attributes or JavaScript, you can append an option name to `data-coreui-`, as in `data-coreui-animation="{value}"`. Make sure to change the case type of the option name from "_camelCase_" to "_kebab-case_" when passing the options via data attributes. For example, use `data-coreui-custom-class="beautifier"` instead of `data-coreui-customClass="beautifier"`. +Options can be passed using data attributes or JavaScript. To do this, append an option name to `data-coreui-`, such as `data-coreui-animation="{value}"`. Remember to convert the case of the option name from "_camelCase_" to "_kebab-case_" when using data attributes. For instance, you should write `data-coreui-custom-class="beautifier"` rather than `data-coreui-customClass="beautifier"`. -As of CoreUI 4.2.6, all components support an **experimental** reserved data attribute `data-coreui-config` that can house simple component configuration as a JSON string. When an element has `data-coreui-config='{"delay":0, "title":123}'` and `data-coreui-title="456"` attributes, the final `title` value will be `456` and the separate data attributes will override values given on `data-coreui-config`. In addition, existing data attributes are able to house JSON values like `data-coreui-delay='{"show":0,"hide":150}'`. +Starting with CoreUI 4.2.6, all components support an **experimental** reserved data attribute named `data-coreui-config`, which can contain simple component configurations as a JSON string. If an element has attributes `data-coreui-config='{"delay":50, "title":689}'` and `data-coreui-title="Custom Title"`, then the final value for `title` will be `Custom Title`, as the standard data attributes will take precedence over values specified in `data-coreui-config`. Moreover, existing data attributes can also hold JSON values like `data-coreui-delay='{"show":50, "hide":250}'`. \ No newline at end of file diff --git a/docs/layouts/shortcodes/markdown.html b/docs/layouts/shortcodes/markdown.html index 82107bcef..14bbb24c8 100644 --- a/docs/layouts/shortcodes/markdown.html +++ b/docs/layouts/shortcodes/markdown.html @@ -1 +1 @@ -{{- .Inner | markdownify -}} +{{ .Inner | htmlUnescape | markdownify }} \ No newline at end of file From 654e976b3208935f69da027a273d172d6acd96a3 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 17 Jun 2025 15:41:57 +0200 Subject: [PATCH 05/24] docs: update documentation --- README.md | 14 ++++++++++++++ docs/content/components/accordion.md | 9 +++++++++ docs/content/components/alerts.md | 4 ++++ docs/content/components/badge.md | 4 ++++ docs/content/components/breadcrumb.md | 3 +++ docs/content/components/button-group.md | 4 ++++ docs/content/components/buttons.md | 4 ++++ docs/content/components/card.md | 3 +++ docs/content/components/carousel.md | 4 ++++ docs/content/components/close-button.md | 4 ++++ docs/content/components/collapse.md | 4 ++++ docs/content/components/dropdowns.md | 4 ++++ docs/content/components/list-group.md | 3 +++ docs/content/components/modal.md | 4 ++++ docs/content/components/navbar.md | 3 +++ docs/content/components/navs-tabs.md | 4 ++++ docs/content/components/offcanvas.md | 4 ++++ docs/content/components/pagination.md | 4 ++++ docs/content/components/placeholders.md | 4 ++++ docs/content/components/popovers.md | 4 ++++ docs/content/components/progress.md | 3 +++ docs/content/components/scrollspy.md | 4 ++++ docs/content/components/spinners.md | 4 ++++ docs/content/components/toasts.md | 4 ++++ docs/content/components/tooltips.md | 4 ++++ docs/content/forms/form-control.md | 4 ++++ docs/content/forms/input-group.md | 4 ++++ docs/content/forms/range.md | 4 ++++ docs/content/forms/select.md | 4 ++++ docs/content/getting-started/introduction.md | 15 +++++++++++++++ docs/layouts/partials/coreui-vs-bootstrap.html | 13 +++++++++++++ .../shortcodes/coreui-vs-bootstrap.html | 18 ++++++++++++++++++ 32 files changed, 172 insertions(+) create mode 100644 docs/layouts/partials/coreui-vs-bootstrap.html create mode 100644 docs/layouts/shortcodes/coreui-vs-bootstrap.html diff --git a/README.md b/README.md index 5c21f9dcf..4de5ed39c 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,20 @@ Blog

+## CoreUI vs Bootstrap + +CoreUI is fully compatible with Bootstrap, but it’s more than just a theme or UI extension — it’s a professionally developed and maintained system that addresses many of the limitations developers face with Bootstrap alone. + +**Key differences between CoreUI and Bootstrap:** + +* ✅ **Framework-native versions** – CoreUI offers official libraries for [React.js](https://coreui.io/react/), [Vue.js](https://coreui.io/vue/), and [Angular](https://coreui.io/angular/), while Bootstrap depends on third-party community plugins for framework integration. +* 👨‍💻 **Full-time maintained project** – CoreUI is not a community-only initiative. It’s developed by a dedicated, full-time team focused on long-term evolution and support. +* 📦 **More built-in components** – CoreUI includes many components not present in Bootstrap by default, such as range sliders, multi-selects, and step-based form wizards. +* 🛠️ **Sass Modules support today** – CoreUI already supports Sass Modules out of the box, a feature that Bootstrap plans to introduce in version 6. +* 🌍 **Modern RTL/LTR support** – CoreUI uses CSS logical properties to provide seamless RTL and LTR layout support for multilingual and internationalized apps. +* 🔒 **Long-Term Support (LTS)** – While Bootstrap 3 & 4 LTS is now a paid service via [HeroDevs](https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol), CoreUI continues to offer long-term support without additional cost. + +Whether you're starting a new project or migrating from Bootstrap, CoreUI gives you a powerful upgrade path with more features, framework bindings, and peace of mind for long-term maintainability. ## Table of contents diff --git a/docs/content/components/accordion.md b/docs/content/components/accordion.md index fd6f29ea1..851dad790 100644 --- a/docs/content/components/accordion.md +++ b/docs/content/components/accordion.md @@ -9,6 +9,10 @@ aliases: toc: true bootstrap: true other_frameworks: accordion +# schema: +# description: Documentation and usage examples for Bootstrap Accordion component built with CoreUI. +# headline: Bootstrap Accordion Component – Usage & Examples +# keywords: Accordion, Bootstrap, Component, CoreUI --- ## How it works @@ -163,4 +167,9 @@ Accordions use local CSS variables on .accordion for enhanced real-time customiz {{< scss-docs name="accordion-css-vars" file="scss/_accordion.scss" >}} ### SASS variables + {{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Accordion" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md index 4d6a18f3f..4d6cc2920 100644 --- a/docs/content/components/alerts.md +++ b/docs/content/components/alerts.md @@ -258,3 +258,7 @@ Used alongside `$alert-variants` to create contextual modifier classes for our a Loop that creates the modifier classes with the `alert-variant()` mixin. {{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Alert" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/badge.md b/docs/content/components/badge.md index 4164d710b..13ce37cd0 100644 --- a/docs/content/components/badge.md +++ b/docs/content/components/badge.md @@ -101,3 +101,7 @@ Badges use local CSS variables on `.badge` for enhanced real-time customization. ### SASS variables {{< scss-docs name="badge-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Badge" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/breadcrumb.md b/docs/content/components/breadcrumb.md index ba67a078d..6ebbf9912 100644 --- a/docs/content/components/breadcrumb.md +++ b/docs/content/components/breadcrumb.md @@ -112,3 +112,6 @@ Breadcrumbs use local CSS variables on `.breadcrumb` for enhanced real-time cust {{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}} +{{< markdown >}} +{{< coreui-vs-bootstrap component="Breadcrumb" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/button-group.md b/docs/content/components/button-group.md index f7a63476f..696e9fe3f 100644 --- a/docs/content/components/button-group.md +++ b/docs/content/components/button-group.md @@ -268,3 +268,7 @@ Create a set of buttons that appear vertically stacked rather than horizontally.
{{< /example >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Button Group" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md index 31c9b3665..92e3d52d0 100644 --- a/docs/content/components/buttons.md +++ b/docs/content/components/buttons.md @@ -356,3 +356,7 @@ There are three mixins for buttons: button and button outline variant mixins, pl Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`. {{< scss-docs name="btn-variant-loops" file="scss/_buttons.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Button" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/card.md b/docs/content/components/card.md index 4fb052496..442b62686 100644 --- a/docs/content/components/card.md +++ b/docs/content/components/card.md @@ -756,3 +756,6 @@ Cards use local CSS variables on `.card` for enhanced real-time customization. V {{< scss-docs name="card-variables" file="scss/_variables.scss" >}} +{{< markdown >}} +{{< coreui-vs-bootstrap component="Card" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/carousel.md b/docs/content/components/carousel.md index 8f1c496d9..fd21e871b 100644 --- a/docs/content/components/carousel.md +++ b/docs/content/components/carousel.md @@ -391,3 +391,7 @@ Variables for all carousels: Variables for the [dark carousel](#dark-variant): {{< scss-docs name="carousel-dark-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Carousel" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/close-button.md b/docs/content/components/close-button.md index efdf3ebc9..3a0df3e6d 100644 --- a/docs/content/components/close-button.md +++ b/docs/content/components/close-button.md @@ -46,3 +46,7 @@ Add `data-coreui-theme="dark"` to the `.btn-close`, or to its parent element, to ### SASS variables {{< scss-docs name="close-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Close Button" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/collapse.md b/docs/content/components/collapse.md index a2297fe3e..6abc65169 100644 --- a/docs/content/components/collapse.md +++ b/docs/content/components/collapse.md @@ -202,3 +202,7 @@ myCollapsible.addEventListener('hidden.coreui.collapse', event => { Collapse transition classes can be found in `scss/_transitions.scss` as these are shared across multiple components (collapse and accordion). {{< scss-docs name="collapse-classes" file="scss/_transitions.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Collapse" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/dropdowns.md b/docs/content/components/dropdowns.md index 1129edbb7..200ed314a 100644 --- a/docs/content/components/dropdowns.md +++ b/docs/content/components/dropdowns.md @@ -1129,3 +1129,7 @@ Variables for the CSS-based carets that indicate a dropdown's interactivity: Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`. {{< scss-docs name="caret-mixins" file="scss/mixins/_caret.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Dropdown" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/list-group.md b/docs/content/components/list-group.md index 5d32955f1..cc8d3c353 100644 --- a/docs/content/components/list-group.md +++ b/docs/content/components/list-group.md @@ -500,3 +500,6 @@ Loop that generates the modifier classes with the `list-group-item-variant()` mi {{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}} +{{< markdown >}} +{{< coreui-vs-bootstrap component="List Group" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/modal.md b/docs/content/components/modal.md index cac032391..b3e8c0fe4 100644 --- a/docs/content/components/modal.md +++ b/docs/content/components/modal.md @@ -870,3 +870,7 @@ Modals use local CSS variables on `.modal` and `.modal-backdrop` for enhanced re [Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`. {{< scss-docs name="modal-fullscreen-loop" file="scss/_modal.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Modal" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/navbar.md b/docs/content/components/navbar.md index 4ea4baade..31c735d10 100644 --- a/docs/content/components/navbar.md +++ b/docs/content/components/navbar.md @@ -812,3 +812,6 @@ Variables for the [dark navbar](#color-schemes): {{< scss-docs name="navbar-expand-loop" file="scss/_navbar.scss" >}} +{{< markdown >}} +{{< coreui-vs-bootstrap component="Navbar" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/navs-tabs.md b/docs/content/components/navs-tabs.md index 2be701d43..f2fba7580 100644 --- a/docs/content/components/navs-tabs.md +++ b/docs/content/components/navs-tabs.md @@ -762,3 +762,7 @@ On the `.nav-underline-border` modifier class: ### SASS variables {{< scss-docs name="nav-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Nav" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/offcanvas.md b/docs/content/components/offcanvas.md index c6a10f15b..79c739c45 100644 --- a/docs/content/components/offcanvas.md +++ b/docs/content/components/offcanvas.md @@ -355,3 +355,7 @@ Offcanvas uses local CSS variables on `.offcanvas` for enhanced real-time custom ### SASS variables {{< scss-docs name="offcanvas-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Offcanvas" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/pagination.md b/docs/content/components/pagination.md index cb1028419..c5eecdc49 100644 --- a/docs/content/components/pagination.md +++ b/docs/content/components/pagination.md @@ -175,3 +175,7 @@ Pagination now uses local CSS variables on `.pagination` for enhanced real-time ### SASS mixins {{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Pagination" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/placeholders.md b/docs/content/components/placeholders.md index 4e3a56ae3..7c89154de 100644 --- a/docs/content/components/placeholders.md +++ b/docs/content/components/placeholders.md @@ -145,3 +145,7 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c ### SASS variables {{< scss-docs name="placeholders" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Placeholder" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/popovers.md b/docs/content/components/popovers.md index edbd39634..3834e4ebc 100644 --- a/docs/content/components/popovers.md +++ b/docs/content/components/popovers.md @@ -271,3 +271,7 @@ Popovers use local CSS variables on `.popover` for enhanced real-time customizat ### SASS variables {{< scss-docs name="popover-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Popover" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/progress.md b/docs/content/components/progress.md index 54e1683ac..3beae1831 100644 --- a/docs/content/components/progress.md +++ b/docs/content/components/progress.md @@ -239,3 +239,6 @@ Used for creating the CSS animations for `.progress-bar-animated`. Included in ` {{< scss-docs name="progress-keyframes" file="scss/_progress.scss" >}} +{{< markdown >}} +{{< coreui-vs-bootstrap component="Progress" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/scrollspy.md b/docs/content/components/scrollspy.md index aad4ccac0..3133b22ff 100644 --- a/docs/content/components/scrollspy.md +++ b/docs/content/components/scrollspy.md @@ -317,3 +317,7 @@ firstScrollSpyEl.addEventListener('activate.coreui.scrollspy', () => { // do something... }) ``` + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Scrollspy" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/spinners.md b/docs/content/components/spinners.md index b3da0990d..3f35190ec 100644 --- a/docs/content/components/spinners.md +++ b/docs/content/components/spinners.md @@ -211,3 +211,7 @@ Used for creating the CSS animations for our spinners. Included in `scss/_spinne [margin]: {{< docsref "/utilities/spacing" >}} [sizing]: {{< docsref "/utilities/sizing" >}} [text]: {{< docsref "/utilities/text" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Spinner" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/toasts.md b/docs/content/components/toasts.md index 56cbd4b7f..4d3dc74ed 100644 --- a/docs/content/components/toasts.md +++ b/docs/content/components/toasts.md @@ -391,3 +391,7 @@ Toasts use local CSS variables on `.toast` for enhanced real-time customization. ### SASS variables {{< scss-docs name="toast-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Toast" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/components/tooltips.md b/docs/content/components/tooltips.md index 011359d59..e0b5d7138 100644 --- a/docs/content/components/tooltips.md +++ b/docs/content/components/tooltips.md @@ -299,3 +299,7 @@ Bootstrap tooltips utilize local CSS variables on `.tooltip` for improved real-t ### SASS variables {{< scss-docs name="tooltip-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Tooltip" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/forms/form-control.md b/docs/content/forms/form-control.md index a34400dda..39a1d2631 100644 --- a/docs/content/forms/form-control.md +++ b/docs/content/forms/form-control.md @@ -188,3 +188,7 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist). `$form-file-*` are for file input. {{< scss-docs name="form-file-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Form Control" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/forms/input-group.md b/docs/content/forms/input-group.md index ca0d96edb..1e7bb95a7 100644 --- a/docs/content/forms/input-group.md +++ b/docs/content/forms/input-group.md @@ -315,3 +315,7 @@ Input groups include support for custom selects and custom file inputs. Browser ### SASS variables {{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Input Group" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/forms/range.md b/docs/content/forms/range.md index 6e1ed0892..408053983 100644 --- a/docs/content/forms/range.md +++ b/docs/content/forms/range.md @@ -49,3 +49,7 @@ By default, range inputs "snap" to integer values. To change this, you can speci ### SASS variables {{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Form Range" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/forms/select.md b/docs/content/forms/select.md index ca02b81ad..7e1ec6893 100644 --- a/docs/content/forms/select.md +++ b/docs/content/forms/select.md @@ -81,3 +81,7 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara ### SASS variables {{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}} + +{{< markdown >}} +{{< coreui-vs-bootstrap component="Form Select" >}} +{{< /markdown >}} \ No newline at end of file diff --git a/docs/content/getting-started/introduction.md b/docs/content/getting-started/introduction.md index ffe752ba2..71eb907e6 100644 --- a/docs/content/getting-started/introduction.md +++ b/docs/content/getting-started/introduction.md @@ -10,6 +10,21 @@ aliases: toc: true --- +## CoreUI vs Bootstrap + +CoreUI is fully compatible with Bootstrap, but it’s more than just a theme or UI extension — it’s a professionally developed and maintained system that addresses many of the limitations developers face with Bootstrap alone. + +**Key differences between CoreUI and Bootstrap:** + +* ✅ **Framework-native versions** – CoreUI offers official libraries for [React.js](https://coreui.io/react/), [Vue.js](https://coreui.io/vue/), and [Angular](https://coreui.io/angular/), while Bootstrap depends on third-party community plugins for framework integration. +* 👨‍💻 **Full-time maintained project** – CoreUI is not a community-only initiative. It’s developed by a dedicated, full-time team focused on long-term evolution and support. +* 📦 **More built-in components** – CoreUI includes many components not present in Bootstrap by default, such as range sliders, multi-selects, and step-based form wizards. +* 🛠️ **Sass Modules support today** – CoreUI already supports Sass Modules out of the box, a feature that Bootstrap plans to introduce in version 6. +* 🌍 **Modern RTL/LTR support** – CoreUI uses CSS logical properties to provide seamless RTL and LTR layout support for multilingual and internationalized apps. +* 🔒 **Long-Term Support (LTS)** – While Bootstrap 3 & 4 LTS is now a paid service via [HeroDevs](https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol), CoreUI continues to offer long-term support without additional cost. + +Whether you're starting a new project or migrating from Bootstrap, CoreUI gives you a powerful upgrade path with more features, framework bindings, and peace of mind for long-term maintainability. + ## Quick start Looking to quickly add CoreUI for Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? [Head to the downloads page]({{< docsref "/getting-started/download" >}}). diff --git a/docs/layouts/partials/coreui-vs-bootstrap.html b/docs/layouts/partials/coreui-vs-bootstrap.html new file mode 100644 index 000000000..629d08e42 --- /dev/null +++ b/docs/layouts/partials/coreui-vs-bootstrap.html @@ -0,0 +1,13 @@ +## CoreUI vs Bootstrap + +While this {{ .Get "component" }} component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development. + +**What sets CoreUI apart from Bootstrap?** + +- ✅ **Fully compatible with Bootstrap** – Built directly on Bootstrap, all classes and behaviors work as expected. +- 🧠 **Framework-native versions** – CoreUI provides dedicated libraries for [React.js](https://coreui.io/react/), [Vue.js](https://coreui.io/vue/), and [Angular](https://coreui.io/angular/), unlike Bootstrap which relies on third-party plugins for JavaScript frameworks. +- 👨‍💻 **Maintained by a full-time team** – CoreUI is developed as a professional product, not a volunteer-driven project. +- 📦 **More built-in components** – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc. +- 🛠️ **Sass Modules support today** – CoreUI already supports Sass Modules, which are planned for Bootstrap 6. +- 🌍 **Better LTR/RTL support** – Uses modern CSS logical properties for seamless bidirectional layout support. +- 🔒 **Free LTS (Long-Term Support)** – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free. diff --git a/docs/layouts/shortcodes/coreui-vs-bootstrap.html b/docs/layouts/shortcodes/coreui-vs-bootstrap.html new file mode 100644 index 000000000..0562e9587 --- /dev/null +++ b/docs/layouts/shortcodes/coreui-vs-bootstrap.html @@ -0,0 +1,18 @@ +## CoreUI vs Bootstrap + +While this {{ .Get "component" }} component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development. + +**What sets CoreUI apart from Bootstrap?** + +- ✅ **Fully compatible with Bootstrap** – Built directly on Bootstrap, all classes and behaviors work as expected. +- 🧠 **Framework-native versions** – CoreUI provides dedicated libraries for [React.js](https://coreui.io/react/), [Vue.js](https://coreui.io/vue/), and [Angular](https://coreui.io/angular/), unlike Bootstrap which relies on third-party plugins for JavaScript frameworks. +- 👨‍💻 **Maintained by a full-time team** – CoreUI is developed as a professional product, not a volunteer-driven project. +- 📦 **More built-in components** – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc. +- 🛠️ **Sass Modules support today** – CoreUI already supports Sass Modules, which are planned for Bootstrap 6. +- 🌍 **Better LTR/RTL support** – Uses modern CSS logical properties for seamless bidirectional layout support. +- 🔒 **LTS (Long-Term Support)** – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free. + +Whether you're building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem. + +👉 [Explore CoreUI Bootstrap Components](https://coreui.io/bootstrap/) +👉 [Compare CoreUI vs Bootstrap](https://coreui.io/bootstrap/docs/getting-started/introduction/#coreui-vs-bootstrap) From 86dae5a42199cdbb8aa7d8c0f60e67a162814b1c Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 20 Jun 2025 14:23:58 +0200 Subject: [PATCH 06/24] docs: update content --- docs/content/components/toasts.md | 87 ++++++++++++++++--------------- 1 file changed, 45 insertions(+), 42 deletions(-) diff --git a/docs/content/components/toasts.md b/docs/content/components/toasts.md index 4d3dc74ed..8f7f82cc2 100644 --- a/docs/content/components/toasts.md +++ b/docs/content/components/toasts.md @@ -1,14 +1,14 @@ --- layout: docs title: Toasts -description: Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. +description: Send push notifications to your visitors with a toast, a lightweight and easily customizable alert message. group: components toc: true bootstrap: true other_frameworks: toast --- -Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They're built with flexbox, so they're easy to align and position. +Bootstrap toasts are lightweight notifications that mimic the push notifications popularized by mobile and desktop operating systems. They utilize flexbox, making them simple to align and position. ## Overview @@ -27,13 +27,13 @@ Things to know when using the toast plugin: To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use `display: flex`, allowing easy alignment of content thanks to our margin and flexbox utilities. -Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button. +Bootstrap toasts are as flexible as you need and require very little markup. At a minimum, you should have a single element containing your “toasted” content, and it's strongly recommended to include a dismiss button. {{< example class=" bg-body-tertiary" >}}