Merge pull request #2 from themesberg/v1.1.0

V1.1.0

Author: zoltanszogyenyi

config.yml

@@ -5,7 +5,7 @@ baseURL:                "https://flowbite.com/docs/"
 enableInlineShortcodes: true
 
 params:
-  current_version: 1.0.7
+  current_version: 1.1.0
   authors: Themesberg
   social_image_path: /docs/images/og-image.png
 

content/components/alerts.md

@@ -74,6 +74,10 @@ You can also include a descriptive icon to complement the message inside the ale
 </div>
 {{< /example >}}
 
+<div class="mt-8 -mb-5">
+  {{< requires_js >}}
+</div>
+
 ## Dismissable alerts
 
 Use the following alert elements that are also dismissable.

content/components/dropdowns.md

@@ -258,24 +258,23 @@ Group a series of buttons together on a single line or stack them in a vertical
 </fieldset>
 {{< /example >}}
 
+<div class="mt-8 -mb-5">
+  {{< requires_js >}}
+</div>
+
 ## File upload
 
+Use the following Tailwind CSS file upload element to receive any type of file from users.
+
 {{< example >}}
 <label class="text-sm font-medium text-gray-900 block mb-2" for="user_avatar">Upload file</label>
 <input class="block w-full cursor-pointer bg-gray-50 border border-gray-300 text-gray-900 focus:outline-none focus:border-transparent text-sm rounded-lg" aria-describedby="user_avatar_help" id="user_avatar" type="file">
 <div class="mt-1 text-sm text-gray-500" id="user_avatar_help">A profile picture is useful to confirm your are logged into your account</div>
 {{< /example >}}
 
-Make sure that you also add this extra bit of CSS:
-
-```css
-input[type=file]::-webkit-file-upload-button,
-input[type=file]::file-selector-button {
-	@apply text-white bg-gray-700 hover:bg-gray-600 font-medium text-sm cursor-pointer border-0 py-2.5 pl-8 pr-4;
-	margin-inline-start: -1rem;
-	margin-inline-end: 1rem;
-}
-```
+<div class="mt-8 -mb-5">
+  {{< requires_js >}}
+</div>
 
 ## Toggle (switches)
 
@@ -294,21 +293,3 @@ Use the following toggle (switches) element to ask for a yes or no type of input
   <span class="ml-3 text-gray-900 text-sm font-medium">Toggle me (checked)</span>
 </label>
 {{< /example >}}
-
-If you aren't using FlowBite's `flowbite.css` file make sure that you include the following styles in your CSS for the toggle active styles:
-
-```css
-.toggle-bg:after {
-  content: '';
-  @apply absolute left-0.5 top-0.5 bg-white border border-gray-300 h-5 w-5 rounded-full ring-0 transition;
-}
-
-input:checked + .toggle-bg:after {
-	transform: translateX(100%);
-	@apply border-white;
-}
-
-input:checked + .toggle-bg {
-	@apply bg-blue-600 border-blue-600;
-}
-```

content/components/forms.md

@@ -19,7 +19,7 @@ Get started with the responsive navbar component from Flowbite to quickly set up
 Use this example of a navigation bar built with Tailwind CSS to create a navigation element for your website.
 
 {{< example >}}
-<nav class="bg-white border-gray-200 px-2 md:px-4 lg:px-5">
+<nav class="bg-white border-gray-200 px-2">
   <div class="container mx-auto flex flex-wrap items-center justify-between">
     <a href="#" class="flex">
       <svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"/><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"/><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"/></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"/></clipPath></defs></svg>
@@ -58,7 +58,7 @@ Use this example of a navigation bar built with Tailwind CSS to create a navigat
 Use this example to create a navigation bar with a user profile or button to toggle a dropdown menu.
 
 {{< example >}}
-<nav class="bg-white border-gray-200 px-2 md:px-4 lg:px-5">
+<nav class="bg-white border-gray-200 px-2">
   <div class="container mx-auto flex flex-wrap items-center justify-between">
   <a href="#" class="flex">
     <svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"/><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"/><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"/></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"/></clipPath></defs></svg>
@@ -124,7 +124,7 @@ Use this example to create a navigation bar with a user profile or button to tog
 Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.
 
 {{< example >}}
-<nav class="bg-white border-gray-200 px-2 md:px-4 lg:px-5">
+<nav class="bg-white border-gray-200 px-2">
   <div class="container mx-auto flex flex-wrap items-center justify-between">
   <a href="#" class="flex">
     <svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"/><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"/><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"/></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"/></clipPath></defs></svg>
@@ -165,7 +165,7 @@ Use this example of a navbar element to also show a search input element that yo
 Use the following navbar element to show a call to action button.
 
 {{< example >}}
-<nav class="bg-white border-gray-200 px-2 md:px-4 lg:px-5">
+<nav class="bg-white border-gray-200 px-2">
   <div class="container mx-auto flex flex-wrap items-center justify-between">
   <a href="#" class="flex">
     <svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"/><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"/><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"/></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"/></clipPath></defs></svg>

content/components/navbar.md

@@ -101,9 +101,9 @@ Use the following markup to show simple previous and next elements.
 
 Use the following code to show simple previous and next elements with icons.
 
-{{< example >}}
+{{< example class="flex" >}}
 <!-- Previous Button -->
-<a href="#" class="text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 text-sm font-medium rounded-lg inline-flex items-center px-4 py-2">
+<a href="#" class="text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 text-sm font-medium rounded-lg inline-flex items-center px-4 py-2 mr-3">
   <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
   Previous
 </a>

content/components/pagination.md

@@ -1,62 +1,127 @@
 ---
 layout: home
 title: Tailwind CSS Tooltip - Flowbite
-description: Use the following Tailwind CSS powered tooltips to show extra content when hovering or clicking on an element
+description: Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element
 group: components
 toc: true
+requires_js: true
 
 previous: Tables
 previousLink: components/tables
+
+next: Datepicker
+nextLink: plugins/datepicker
 ---
 
-FlowBite includes custom styles using Tailwind CSS and Tippy JS to enable tooltips that can be shown when hovering or clicking on an element powered by data attributes.
+Flowbite allows you to use the Tailwind CSS tooltip component to show extra information when hovering or focusing over an element in multiple positions, styles, and animations.
+
+Before continuing, make sure that you have the <a href="{{< ref "getting-started/quickstart" >}}" rel="nofollow" target="_blank">Flowbite JavaScript file</a> included in your project in order to make the tooltip component work.
 
 ## Using tooltips
 
-If you want to use tooltips, make sure that you have **Tippy JS** included in your project. Learn how to do that by reading the official guide on <a href="https://atomiks.github.io/tippyjs/v6/getting-started/" target="_blank">Tippy JS</a>. 
+To get started with using tooltips all you need to do is add the `data-tooltip-target="{elementId}"` data attribute to an element where `elementId` is the id of the tooltip component. In the following example you can see the button that will trigger the `tooltip-default` element to be shown when hovered or focused.
+
+{{< example >}}
+<button data-tooltip-target="tooltip-default" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Default tooltip</button>
+<div id="tooltip-default" role="tooltip" class="tooltip absolute z-10 inline-block bg-gray-900 font-medium shadow-sm text-white py-2 px-3 text-sm rounded-lg opacity-0 duration-300 transition-opacity invisible">
+    Tooltip content
+    <div class="tooltip-arrow" data-popper-arrow></div>
+</div>
+{{< /example >}}
+
+## Tooltip styles
 
-Apply the `data-tippy-content` data attribute to any element and the content inside will be applied as the tooltip text.
+You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the `data-tooltip-style="{light|dark}"` data attribute.
 
 {{< example >}}
-<button data-tippy-content="Tooltip Content" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Default tooltip</button>
+<!-- Light style tooltip -->
+<button data-tooltip-target="tooltip-light" data-tooltip-style="light" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Light tooltip</button>
+<div id="tooltip-light" role="tooltip" class="tooltip absolute z-10 inline-block bg-white font-medium shadow-sm text-gray-900 border border-gray-200 py-2 px-3 text-sm rounded-lg opacity-0 invisible">
+    Tooltip content
+    <div class="tooltip-arrow" data-popper-arrow></div>
+</div>
+
+<!-- Dark style tooltip -->
+<button data-tooltip-target="tooltip-dark" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Dark tooltip</button>
+<div id="tooltip-dark" role="tooltip" class="tooltip absolute z-10 inline-block bg-gray-900 font-medium shadow-sm text-white py-2 px-3 text-sm rounded-lg opacity-0 invisible">
+    Tooltip content
+    <div class="tooltip-arrow" data-popper-arrow></div>
+</div>
 {{< /example >}}
 
-## Positioning
+## Placement
 
-You can also set the positioning of the tooltips by using the `data-tippy-placement={placement}` data attribute.
+The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using the `data-tooltip-placement="{top|right|bottom"left}"` data attribute.
 
 {{< example >}}
-<button data-tippy-content="Tooltip placement top" data-tippy-placement="top" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Tooltip top</button>
-<button data-tippy-content="Tooltip placement right" data-tippy-placement="right" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Tooltip right</button>
-<button data-tippy-content="Tooltip placement bottom" data-tippy-placement="bottom" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Tooltip bottom</button>
-<button data-tippy-content="Tooltip placement left" data-tippy-placement="left" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Tooltip left</button>
+<!-- Show tooltip on top -->
+<button data-tooltip-target="tooltip-top" data-tooltip-placement="top" type="button" class="mb-2 md:mb-0 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Tooltip top</button>
+<div id="tooltip-top" role="tooltip" class="tooltip absolute z-10 inline-block bg-gray-900 font-medium shadow-sm text-white py-2 px-3 text-sm rounded-lg opacity-0 invisible">
+    Tooltip on top
+    <div class="tooltip-arrow" data-popper-arrow></div>
+</div>
+
+<!-- Show tooltip on right -->
+<button data-tooltip-target="tooltip-right" data-tooltip-placement="right" type="button" class="mb-2 md:mb-0 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Tooltip right</button>
+<div id="tooltip-right" role="tooltip" class="tooltip absolute z-10 inline-block bg-gray-900 font-medium shadow-sm text-white py-2 px-3 text-sm rounded-lg opacity-0 invisible">
+    Tooltip on right
+    <div class="tooltip-arrow" data-popper-arrow></div>
+</div>
+
+<!-- Show tooltip on bottom -->
+<button data-tooltip-target="tooltip-bottom" data-tooltip-placement="bottom" type="button" class="mb-2 md:mb-0 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Tooltip bottom</button>
+<div id="tooltip-bottom" role="tooltip" class="tooltip absolute z-10 inline-block bg-gray-900 font-medium shadow-sm text-white py-2 px-3 text-sm rounded-lg opacity-0 invisible">
+    Tooltip on bottom
+    <div class="tooltip-arrow" data-popper-arrow></div>
+</div>
+
+<!-- Show tooltip on left -->
+<button data-tooltip-target="tooltip-left" data-tooltip-placement="left" type="button" class="mb-2 md:mb-0 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Tooltip left</button>
+<div id="tooltip-left" role="tooltip" class="tooltip absolute z-10 inline-block bg-gray-900 font-medium shadow-sm text-white py-2 px-3 text-sm rounded-lg opacity-0 invisible">
+    Tooltip on left
+    <div class="tooltip-arrow" data-popper-arrow></div>
+</div>
 {{< /example >}}
 
-## Delay
+## Triggering
 
-You can also apply a delay before the tooltip shows up using the `data-tippy-delay={amount}`. The following example applies a one second delay to the tooltip.
+You can choose the triggering event by using the `data-tooltip-trigger="{hover|click}"` data attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to `hover`.
 
 {{< example >}}
-<button data-tippy-content="Tooltip Content" data-tippy-delay="1000" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Default tooltip</button>
+<!-- Show tooltip on hover -->
+<button data-tooltip-target="tooltip-hover" data-tooltip-trigger="hover" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Tooltip hover</button>
+<div id="tooltip-hover" role="tooltip" class="tooltip absolute z-10 inline-block bg-gray-900 font-medium shadow-sm text-white py-2 px-3 text-sm rounded-lg opacity-0 invisible">
+    Tooltip content
+    <div class="tooltip-arrow" data-popper-arrow></div>
+</div>
+
+<!-- Show tooltip on click -->
+<button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Tooltip click</button>
+<div id="tooltip-click" role="tooltip" class="tooltip absolute z-10 inline-block bg-gray-900 font-medium shadow-sm text-white py-2 px-3 text-sm rounded-lg opacity-0 invisible">
+    Tooltip content
+    <div class="tooltip-arrow" data-popper-arrow></div>
+</div>
 {{< /example >}}
 
 ## Animation
 
-You can also use an animation for the tooltips by using the `data-tippy-animation="scale"` or `data-tippy-animation="fade"` data attributes.
+You can set tooltip animation styles by using the transition utility classes from Tailwind CSS. Make sure that you add `transition-opacity` and `duration-{x}` to set the animation duration.
 
 {{< example >}}
-<button data-tippy-content="Tooltip Content" data-tippy-animation="scale" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Default tooltip</button>
-<button data-tippy-content="Tooltip Content" data-tippy-animation="fade" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Default tooltip</button>
+<button data-tooltip-target="tooltip-animation" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Animated tooltip</button>
+<div id="tooltip-animation" role="tooltip" class="tooltip absolute z-10 inline-block bg-gray-900 font-medium shadow-sm text-white py-2 px-3 text-sm rounded-lg opacity-0 duration-300 transition-opacity invisible">
+    Tooltip content
+    <div class="tooltip-arrow" data-popper-arrow></div>
+</div>
 {{< /example >}}
 
 ## Disable arrow
 
-You can also use tooltips without the arrow styling by using the `data-tippy-arrow="false"` data attribute.
+You can also disable the tooltip arrow by not including the `data-popper-arrow` element.
 
 {{< example >}}
-<button data-tippy-content="Tooltip Content" data-tippy-arrow="false" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Default tooltip</button>
+<button data-tooltip-target="tooltip-no-arrow" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Default tooltip</button>
+<div id="tooltip-no-arrow" role="tooltip" class="tooltip absolute z-10 inline-block bg-gray-900 font-medium shadow-sm text-white py-2 px-3 text-sm rounded-lg opacity-0 invisible">
+    Tooltip content
+</div>
 {{< /example >}}
-
-## Additional options
-
-Learn more about what options you can apply using Tailwind CSS and the tooltip plugin on <a href="https://atomiks.github.io/tippyjs/v6/all-props/" target="_blank">Tippy.js</a>.

content/components/tooltips.md

@@ -15,6 +15,15 @@ nextLink: customize/configuration
 
 We strive to keep a good accountability of all of the version changes that we make for the FlowBite library.
 
+### v1.1.0
+
+- separated the datepicker plugin from the main `flowbite.bundle.js` file and instead created a separate one which is optional to include
+- added more dropdown component variants and placement options
+- reset form styles and move the extra pseudo CSS styles inside the Flowbite Tailwind CSS plugin file (no longer need to write it yourself)
+- create new styles and options for the tooltip component and remove Tippy JS as a dependency
+- improve documentation container styles and spacing
+- create separate files for each component inside the Flowbite JavaScript ES6 file
+
 ### v1.0.7
 
 - apply checkbox and radio input styles as base styles using the plugin interface