-
On my Left
-
On my Top
-
On my Bottom
-
On my Right
+
If you don't specify the position or specify it to be auto
, it will automatically
find the suitable position for the popover and show it
diff --git a/demo/scripts/demo.js b/demo/scripts/demo.js
index 5e9fed97eb35d556df466365b263ad58ba44c116..95ef9d96f9bed0eeedfa60ca869b5080e2b57e94 100644
--- a/demo/scripts/demo.js
+++ b/demo/scripts/demo.js
@@ -205,65 +205,25 @@ document.addEventListener('DOMContentLoaded', function () {
padding: 0,
});
- document.querySelector('#position-btn-left')
+ document.querySelector('#position-btns')
.addEventListener('click', (e) => {
e.preventDefault();
- positionBtnsDriver.highlight({
- element: '#position-btn-left',
- showButtons: false,
- popover: {
- title: 'Did you know?',
- description: 'You can add HTML in title or description also!',
- position: 'left'
- }
- });
- });
-
- document.querySelector('#position-btn-right')
- .addEventListener('click', (e) => {
- e.preventDefault();
-
- positionBtnsDriver.highlight({
- element: '#position-btn-right',
- showButtons: false,
- popover: {
- title: 'Did you know?',
- description: 'You can add HTML in title or description also!',
- position: 'right'
- }
- });
- });
-
- document.querySelector('#position-btn-bottom')
- .addEventListener('click', (e) => {
- e.preventDefault();
-
- positionBtnsDriver.highlight({
- element: '#position-btn-bottom',
- showButtons: false,
- popover: {
- title: 'Did you know?',
- description: 'You can add HTML in title or description also!',
- position: 'bottom'
- }
- });
- });
+ let id = e.target.id;
+ let alignment = e.target.dataset.alignment;
- document.querySelector('#position-btn-top')
- .addEventListener('click', (e) => {
- e.preventDefault();
+ if (!alignment) return;
positionBtnsDriver.highlight({
- element: '#position-btn-top',
+ element: `#${id}`,
showButtons: false,
popover: {
title: 'Did you know?',
description: 'You can add HTML in title or description also!',
- position: 'top'
+ position: alignment
}
});
- });
+ })
/////////////////////////////////////////////////////
// Highlighting single element with popover position
diff --git a/demo/styles/demo.scss b/demo/styles/demo.scss
index 33e525a03c1ea2030b5e7922202f226eb84c5c92..0ee93b421a303199f11792735ce687462527ef31 100644
--- a/demo/styles/demo.scss
+++ b/demo/styles/demo.scss
@@ -108,6 +108,17 @@ section {
}
}
+.position-btns {
+ display: grid;
+ grid-template-columns: repeat(3,1fr);
+ grid-gap: 8px;
+ text-align: center;
+
+ #position-btn-mid-center{
+ grid-column: 2/ span 1;
+ }
+}
+
.position-btns a {
text-decoration: none;
font-size: 13px;
@@ -115,4 +126,4 @@ section {
background: #f54336;
color: white !important;
border-radius: 6px;
-}
\ No newline at end of file
+}