Finish popover component.

themesberg · Aug 9, 2022 · 3d0aad1 · 3d0aad1
1 parent 01ef622
commit 3d0aad1
Show file tree

Hide file tree

Showing 13 changed files with 291 additions and 147 deletions.
diff --git a/config.yml b/config.yml
@@ -5,7 +5,7 @@ enableInlineShortcodes: true
 
 params:
   homepage: "https://flowbite.com"
-  current_version: 1.5.1
+  current_version: 1.5.2
   authors: Themesberg
   social_image_path: /docs/images/og-image.png
 

diff --git a/content/components/popover.md b/content/components/popover.md
diff --git a/content/components/progress.md b/content/components/progress.md
@@ -7,8 +7,8 @@ toc: true
 
 previous: KBD (Keyboard)
 previousLink: components/kbd/
-next: Tables
-nextLink: components/tables/
+next: Popover
+nextLink: components/popover/
 ---
 
 The progress bar component can be used as an indicator to show the completion rate of data sets or it can be used as an animated loader component. There are multiple sizes, colors, and styles available.

diff --git a/content/components/tables.md b/content/components/tables.md
@@ -5,8 +5,8 @@ description: Use the table component to show text, images, links, and other elem
 group: components
 toc: true
 
-previous: Progress
-previousLink: components/progress/
+previous: Popover
+previousLink: components/popover/
 next: Spinner
 nextLink: components/spinner/
 ---

diff --git a/content/components/tooltips.md b/content/components/tooltips.md
@@ -15,7 +15,7 @@ nextLink: forms/input-field/
 
 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">Flowbite JavaScript file</a> included in your project in order to make the tooltip component work.
+Before continuing, make sure that you have the <a href="{{< ref "getting-started/quickstart" >}}">Flowbite JavaScript file</a> included in your project in order to make the tooltip component work.
 
 ## Default tooltip example
 

diff --git a/content/getting-started/changelog.md b/content/getting-started/changelog.md
@@ -15,6 +15,10 @@ nextLink: customize/configuration/
 
 We strive to keep a good accountability of all of the version changes that we make for the Flowbite library.
 
+### v1.5.2
+
+- add new Popover component
+
 ### v1.5.1
 
 - fix drawer js build

diff --git a/content/getting-started/flask.md b/content/getting-started/flask.md
@@ -279,7 +279,7 @@ Let's start by adding a <a href="{{< ref "components/navbar" >}}">Navbar compone
         </div>
     </nav>
 
-    <script src="https://unpkg.com/flowbite@1.5.1/dist/flowbite.js"></script>
+    <script src="https://unpkg.com/flowbite@1.5.2/dist/flowbite.js"></script>
 </body>
 
 </html>

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -1,6 +1,6 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"
     integrity="sha512-axJX7DJduStuBB8ePC8ryGzacZPr3rdLaIDZitiEgWWk2gsXxEFlm4UW0iNzj2h3wp5mOylgHAzBzM4nRSvTZA=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="{{ .Site.BaseURL }}flowbite.js?v=1.5.1b"></script>
-<script src="{{ .Site.BaseURL }}datepicker.js?v=1.5.1b"></script>
-<script src="{{ .Site.BaseURL }}docs.js?v=1.5.1b"></script>
+<script src="{{ .Site.BaseURL }}flowbite.js?v=1.5.2a"></script>
+<script src="{{ .Site.BaseURL }}datepicker.js?v=1.5.2a"></script>
+<script src="{{ .Site.BaseURL }}docs.js?v=1.5.2a"></script>
diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
@@ -3,5 +3,5 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
-<link rel="stylesheet" href="{{ .Site.BaseURL }}flowbite.css?v=1.5.1b">
-<link rel="stylesheet" href="{{ .Site.BaseURL }}docs.css?v=1.5.1b">
+<link rel="stylesheet" href="{{ .Site.BaseURL }}flowbite.css?v=1.5.2a">
+<link rel="stylesheet" href="{{ .Site.BaseURL }}docs.css?v=1.5.2a">
diff --git a/layouts/shortcodes/example.html b/layouts/shortcodes/example.html
@@ -81,7 +81,7 @@
   <div class="code-preview-wrapper">
     <div{{ with .Get "id" }} id="{{ . }}"{{ end }} class="flex p-0 bg-white bg-gradient-to-r border-gray-200 code-preview dark:bg-gray-900 border-x dark:border-gray-600">
       <div class="w-full code-responsive-wrapper">
-        <iframe {{ if $id }}title="{{ replace $id "-" " "}}"{{ end }} class="mx-auto w-full h-0 bg-white dark:bg-gray-900 iframe-code" {{ if $iframeMaxHeight }}style='max-height: {{  sub (int $iframeMaxHeight) 40 }}px'{{ end }} srcdoc="<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><link rel='preconnect' href='https://fonts.googleapis.com'><link rel='preconnect' href='https://fonts.gstatic.com' crossorigin><link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap' rel='stylesheet'><link rel='stylesheet' href='{{ .Site.BaseURL }}flowbite.css?v=1.5.1b'></head><body {{ if $iframeHeight }}style='height: {{  sub (int $iframeHeight) 40 }}px'{{ end }} class='m-5 bg-white dark:bg-gray-900'><div id='exampleWrapper' class='{{ if $class }}{{ $class }}{{ end }}'>{{- $input | safeHTMLAttr -}}{{ if $skeletonPlaceholders }}{{ $skeletonPlaceholdersMarkup }}{{ end }}</div><script src='{{ .Site.BaseURL }}flowbite.js'></script><script src='{{ .Site.BaseURL }}datepicker.js'></script><script>window.onload = function () { const anchorTags = document.querySelectorAll('a'); anchorTags.forEach(function(a){a.addEventListener('click', function(ev){ev.preventDefault();})}); const dropdownEl = document.querySelector('[data-dropdown-toggle]'); if (dropdownEl) {dropdownEl.click();} const modalEl = document.querySelector('[data-modal-toggle]'); if(modalEl) {modalEl.click(); } {{ if $initDatepicker }} const datepickerEl = document.querySelector('[datepicker]'); if (datepickerEl) { datepickerEl.focus({preventScroll: true}); } {{ end }} const dateRangePickerEl = document.querySelector('[data-rangepicker] input'); if (dateRangePickerEl) { dateRangePickerEl.focus(); } const drawerEl = document.querySelector('[data-drawer-show]'); if (drawerEl) { drawerEl.click(); } }</script></body></html>" frameborder="0"></iframe>
+        <iframe {{ if $id }}title="{{ replace $id "-" " "}}"{{ end }} class="mx-auto w-full h-0 bg-white dark:bg-gray-900 iframe-code" {{ if $iframeMaxHeight }}style='max-height: {{  sub (int $iframeMaxHeight) 40 }}px'{{ end }} srcdoc="<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><link rel='preconnect' href='https://fonts.googleapis.com'><link rel='preconnect' href='https://fonts.gstatic.com' crossorigin><link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap' rel='stylesheet'><link rel='stylesheet' href='{{ .Site.BaseURL }}flowbite.css?v=1.5.2a'></head><body {{ if $iframeHeight }}style='height: {{  sub (int $iframeHeight) 40 }}px'{{ end }} class='m-5 bg-white dark:bg-gray-900'><div id='exampleWrapper' class='{{ if $class }}{{ $class }}{{ end }}'>{{- $input | safeHTMLAttr -}}{{ if $skeletonPlaceholders }}{{ $skeletonPlaceholdersMarkup }}{{ end }}</div><script src='{{ .Site.BaseURL }}flowbite.js'></script><script src='{{ .Site.BaseURL }}datepicker.js'></script><script>window.onload = function () { const anchorTags = document.querySelectorAll('a'); anchorTags.forEach(function(a){a.addEventListener('click', function(ev){ev.preventDefault();})}); const dropdownEl = document.querySelector('[data-dropdown-toggle]'); if (dropdownEl) {dropdownEl.click();} const modalEl = document.querySelector('[data-modal-toggle]'); if(modalEl) {modalEl.click(); } {{ if $initDatepicker }} const datepickerEl = document.querySelector('[datepicker]'); if (datepickerEl) { datepickerEl.focus({preventScroll: true}); } {{ end }} const dateRangePickerEl = document.querySelector('[data-rangepicker] input'); if (dateRangePickerEl) { dateRangePickerEl.focus(); } const drawerEl = document.querySelector('[data-drawer-show]'); if (drawerEl) { drawerEl.click(); } }</script></body></html>" frameborder="0"></iframe>
         <div class="flex justify-center items-center p-5 w-full bg-white dark:bg-gray-900" data-component-loader>
           <div role="status">
             <svg aria-hidden="true" class="mr-2 w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowbite",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "The most popular library of interactive components built with Tailwind CSS",
   "keywords": [
     "flowbite",

diff --git a/plugin.js b/plugin.js
@@ -336,41 +336,81 @@ module.exports = plugin(function ({ addBase, theme }) {
             visibility: 'visible',
             transform: 'rotate(45deg)'
         },
-        [`[data-tooltip-style^='light'] + [role="tooltip"] > [data-popper-arrow]:before`]: {
+        ['[data-popper-arrow]:after']: {
+            content: '""',
+            visibility: 'visible',
+            transform: 'rotate(45deg)',
+            position: 'absolute',
+            width: '9px',
+            height: '9px',
+            background: 'inherit'
+        },
+        [`[role="tooltip"] > [data-popper-arrow]:before`]: {
             'border-style': 'solid',
             'border-color': colors.gray[200],
         },
-        [`[data-tooltip-style^='light'] + [role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before`]: {
+        [`.dark [role="tooltip"] > [data-popper-arrow]:before`]: {
+            'border-style': 'solid',
+            'border-color': colors.gray[600],
+        },
+        [`[role="tooltip"] > [data-popper-arrow]:after`]: {
+            'border-style': 'solid',
+            'border-color': colors.gray[200],
+        },
+        [`.dark [role="tooltip"] > [data-popper-arrow]:after`]: {
+            'border-style': 'solid',
+            'border-color': colors.gray[600],
+        },
+        [`[role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before`]: {
+            'border-bottom-width': '1px',
+            'border-right-width': '1px'
+        },
+        [`[role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:after`]: {
             'border-bottom-width': '1px',
             'border-right-width': '1px'
         },
-        [`[data-tooltip-style^='light'] + [role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:before`]: {
+        [`[role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:before`]: {
             'border-bottom-width': '1px',
             'border-left-width': '1px'
         },
-        [`[data-tooltip-style^='light'] + [role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:before`]: {
+        [`[role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:after`]: {
+            'border-bottom-width': '1px',
+            'border-left-width': '1px'
+        },
+        [`[role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:before`]: {
+            'border-top-width': '1px',
+            'border-left-width': '1px'
+        },
+        [`[role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:after`]: {
             'border-top-width': '1px',
             'border-left-width': '1px'
         },
-        [`[data-tooltip-style^='light'] + [role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:before`]: {
+        [`[role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:before`]: {
+            'border-top-width': '1px',
+            'border-right-width': '1px'
+        },
+        [`[role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:after`]: {
             'border-top-width': '1px',
             'border-right-width': '1px'
         },
         [`[role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]`]: {
-            bottom: '-4px'
+            bottom: '-5px'
         },
         [`[role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]`]: {
-            top: '-4px'
+            top: '-5px'
         },
         [`[role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]`]: {
-            right: '-4px'
+            right: '-5px'
         },
         [`[role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]`]: {
-            left: '-4px'
+            left: '-5px'
         },
         ['[role="tooltip"].invisible > [data-popper-arrow]:before']: {
             visibility: 'hidden'
         },
+        ['[role="tooltip"].invisible > [data-popper-arrow]:after']: {
+            visibility: 'hidden'
+        },
     })
 }, {
     darkMode: 'class', // or 'media' or 'class',

diff --git a/src/components/popover.js b/src/components/popover.js
@@ -2,6 +2,7 @@ import { createPopper } from '@popperjs/core';
 
 const Default = {
     placement: 'top',
+    offset: 10,
     triggerType: 'hover',
     onShow: () => { },
     onHide: () => { }
@@ -23,10 +24,24 @@ class Popover {
                 this._triggerEl.addEventListener(ev, () => {
                     this.show()
                 })
+                this._targetEl.addEventListener(ev, () => {
+                    this.show()
+                })
             })
             triggerEvents.hideEvents.forEach(ev => {
                 this._triggerEl.addEventListener(ev, () => {
-                    this.hide()
+                    setTimeout(() => {
+                        if (!this._targetEl.matches(':hover')) {
+                            this.hide()
+                        }
+                    }, 100)
+                })
+                this._targetEl.addEventListener(ev, () => {
+                    setTimeout(() => {
+                        if (!this._triggerEl.matches(':hover')) {
+                            this.hide()
+                        }
+                    }, 100)
                 })
             })
         }
@@ -39,7 +54,7 @@ class Popover {
                 {
                     name: 'offset',
                     options: {
-                        offset: [0, 8],
+                        offset: [0, this._options.offset],
                     },
                 },
             ],
@@ -111,9 +126,11 @@ function initPopover() {
         const targetEl = document.getElementById(triggerEl.getAttribute('data-popover-target'))
         const triggerType = triggerEl.getAttribute('data-popover-trigger');
         const placement = triggerEl.getAttribute('data-popover-placement');
+        const offset = triggerEl.getAttribute('data-popover-offset');
 
         new Popover(targetEl, triggerEl, {
             placement: placement ? placement : Default.placement,
+            offset: offset ? parseInt(offset) : Default.offset,
             triggerType: triggerType ? triggerType : Default.triggerType
         })
     })
-Original file line number
+Diff line change
@@ Expand Up @@
             </div>
         </nav>
-        <script src="https://unpkg.com/flowbite@1.5.1/dist/flowbite.js"></script>
+        <script src="https://unpkg.com/flowbite@1.5.2/dist/flowbite.js"></script>
     </body>
     </html>
@@ Expand Down @@