Skip to content

Commit 484f6a8

Browse files
author
SoorajSNBlaze333
committed
Patches
1 parent 4a4528d commit 484f6a8

File tree

11 files changed

+275
-218
lines changed

11 files changed

+275
-218
lines changed

dist/index.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,18 @@
9595
outline: none;
9696
}
9797

98+
.tooltip-helper-footer {
99+
display: flex;
100+
justify-content: space-between;
101+
align-items: center;
102+
}
103+
104+
.tooltip-helper-footer > div {
105+
display: flex;
106+
justify-content: space-between;
107+
align-items: center;
108+
}
109+
98110
.tooltip-helper-next-sequence,
99111
.tooltip-helper-prev-sequence {
100112
background-color: rgb(22, 121, 251);

dist/index.js

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,13 @@ const confirmationHTML = `<div id="tooltip-helper-confirmation" class="tooltip-h
99
</div>
1010
</div>`;
1111

12-
const prevButtonHTML = `<button id="tooltip-helper-prev-sequence" class="tooltip-helper-prev-sequence mt-2">Previous</button>`;
13-
14-
const nextButtonHTML = `<button id="tooltip-helper-next-sequence" class="tooltip-helper-next-sequence mt-2 ml-2">Next</button>`;
15-
16-
const closeButtonHTML = `<button id="tooltip-helper-end-sequence" class="tooltip-helper-end-sequence">Quit</button>`;const offset = 10;
12+
const footerHTML = `<div class="tooltip-helper-footer mt-2">
13+
<button id="tooltip-helper-end-sequence" class="tooltip-helper-end-sequence">Quit</button>
14+
<div>
15+
<button id="tooltip-helper-prev-sequence" class="tooltip-helper-prev-sequence">Previous</button>
16+
<button id="tooltip-helper-next-sequence" class="tooltip-helper-next-sequence ml-2">Next</button>
17+
</div>
18+
</div>`;const offset = 10;
1719
var sequenceIndex = 0;
1820

1921
const createStage = (sequence, originalSequence) => {
@@ -27,8 +29,8 @@ const createStage = (sequence, originalSequence) => {
2729
let styles = getComputedStyle(elem);
2830
let elemBoundaries = elem.getBoundingClientRect();
2931
let position = {
30-
x: elemBoundaries.left,
31-
y: elemBoundaries.top + elemBoundaries.height + offset
32+
x: elemBoundaries.left < offset ? offset : Math.round(elemBoundaries.left),
33+
y: Math.round(elemBoundaries.top + elemBoundaries.height + offset)
3234
};
3335

3436
let activeElement = getElement("#tooltip-helper-backdrop .tooltip-helper-active");
@@ -37,20 +39,19 @@ const createStage = (sequence, originalSequence) => {
3739
activeElement.classList.add("tooltip-helper-active");
3840
backdrop.append(activeElement);
3941
}
40-
activeElement.style.top = elemBoundaries.top + "px";
41-
activeElement.style.left = elemBoundaries.left + "px";
42+
activeElement.style.top = Math.round(elemBoundaries.top) + "px";
43+
activeElement.style.left = Math.round(elemBoundaries.left) + "px";
4244
activeElement.style.height = elemBoundaries.height + "px";
4345
activeElement.style.width = elemBoundaries.width + "px";
4446
activeElement.style.borderRadius = styles.borderRadius;
4547

4648
let descriptionElement = getElement("#tooltip-helper-backdrop .tooltip-helper-active-description");
4749
if (!descriptionElement) {
4850
descriptionElement = document.createElement("div");
51+
descriptionElement.style.willChange = "transform";
4952
descriptionElement.classList.add("tooltip-helper-active-description");
50-
descriptionElement.innerHTML += closeButtonHTML;
51-
descriptionElement.innerHTML += "<p id='tooltip-helper-active-description-text' class='mt-2 mb-2'>" + description + "</p>";
52-
descriptionElement.innerHTML += prevButtonHTML;
53-
descriptionElement.innerHTML += nextButtonHTML;
53+
descriptionElement.innerHTML += "<p id='tooltip-helper-active-description-text' class='mt-2 mb-2'></p>";
54+
descriptionElement.innerHTML += footerHTML;
5455
backdrop.append(descriptionElement);
5556
}
5657
const prevBtn = getElementById("tooltip-helper-prev-sequence");
@@ -68,8 +69,19 @@ const createStage = (sequence, originalSequence) => {
6869
nextBtn.innerText = "Next";
6970
}
7071
}
71-
descriptionElement.style.transform = "translateX(" + position.x + "px) translateY(" + position.y + "px)";
7272
getElementById("tooltip-helper-active-description-text").innerHTML = description;
73+
if (descriptionElement.offsetWidth <= window.innerWidth) {
74+
descriptionElement.style.width = Math.round(window.innerWidth - (position.x * 2)) + "px";
75+
}
76+
if (descriptionElement.offsetWidth + position.x > window.innerWidth) {
77+
let offset = Math.round(window.innerWidth - Math.round(elemBoundaries.right));
78+
let right = Math.round(((descriptionElement.offsetWidth + position.x) - window.innerWidth) + offset);
79+
position.x -= right;
80+
}
81+
if (descriptionElement.offsetHeight + position.y > window.innerHeight) {
82+
position.y = Math.round((elemBoundaries.top - descriptionElement.offsetHeight) - offset);
83+
}
84+
descriptionElement.style.transform = "translate3d(" + position.x + "px, " + position.y + "px, 0px)";
7385
};
7486

7587
const startSequence = (sequence) => {
@@ -82,9 +94,11 @@ const startSequence = (sequence) => {
8294

8395
const endSequence = () => {
8496
getElement('body').classList.remove('stop-scroll');
85-
getElementById("tooltip-helper-backdrop").style.background = "transparent";
8697
const element = getElementById("tooltip-helper-backdrop");
98+
element.removeEventListener('click', function() {});
99+
element.style.background = "transparent";
87100
element.parentNode.removeChild(element);
101+
sequenceIndex = 0;
88102
};
89103

90104
const next = (sequence) => {

dist/index.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/content/_index.md

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,104 @@
11
---
22
title: "Tooltip Sequence"
33
---
4+
5+
# unpkg
6+
7+
In your `base.html` add the unpkg to the head tag
8+
```html
9+
<link rel="stylesheet" href="https://unpkg.com/tooltip-sequence@latest/dist/index.css">
10+
<script src="https://unpkg.com/tooltip-sequence@latest/dist/index.min.js"></script>
11+
12+
<script>
13+
const options = {
14+
welcomeText: "Let us take you on a quick tour of the page!",
15+
confirmText: "Let's start",
16+
cancelText: "Maybe later",
17+
sequence: [
18+
{
19+
element: "#brand-name",
20+
description: "This is the brand name of the App.",
21+
},
22+
{
23+
element: "#home-nav",
24+
description: "Click here to go to Home page",
25+
},
26+
{
27+
element: "#edit-profile",
28+
description: "This is the edit profile button",
29+
},
30+
],
31+
};
32+
createSequence(options);
33+
</script>
34+
```
35+
36+
# npm
37+
38+
## Installation
39+
40+
Install the package using
41+
42+
```sh
43+
npm install tooltip-sequence --save
44+
```
45+
46+
## Usage
47+
48+
```js
49+
import createSequence from "tooltip-sequence";
50+
import "tooltip-sequence/dist/index.css";
51+
52+
const options = {
53+
welcomeText: "Let us take you on a quick tour of the page!",
54+
confirmText: "Let's start",
55+
cancelText: "Maybe later",
56+
sequence: [
57+
{
58+
element: "#brand-name",
59+
description: "This is the brand name of the App.",
60+
},
61+
{
62+
element: "#home-nav",
63+
description: "Click here to go to Home page",
64+
},
65+
{
66+
element: "#edit-profile",
67+
description: "This is the edit profile button",
68+
},
69+
],
70+
};
71+
createSequence(options);
72+
```
73+
74+
You can add any number of elements to your options using either a class or an id selector.
75+
76+
## Customizing the Tooltips
77+
78+
You can customize any element that is created by overriding the classes.
79+
80+
## Development
81+
82+
You need [Hugo](https://gohugo.io/) to run the dev server. If you have [Homebrew](https://brew.sh/) you can do the following:
83+
84+
```sh
85+
brew install hugo
86+
```
87+
88+
Check this [Hugo installation page](https://gohugo.io/getting-started/installing/) for installing on other systems.
89+
90+
Then clone the repo, install dependencies, and start the server locally.
91+
92+
```sh
93+
git clone https://github.com/SoorajSNBlaze333/tooltip-sequence.git
94+
cd tooltip-sequence
95+
npm i
96+
npm start
97+
```
98+
99+
Open [`http://localhost:1313`](http://localhost:1313) in your browser.
100+
101+
| Scripts | Description |
102+
| -------------------- | ------------------------------------ |
103+
| `npm start` | Starts a local dev server |
104+
| `npm run production` | For generating production docs files |

docs/layouts/_default/baseof.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
77
<title itemprop="name">{{ .Title }}</title>
88
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
9-
<link rel="stylesheet" href="/main.css" />
10-
<script src="/main.js"></script>
11-
<!-- <link rel="stylesheet" href="https://unpkg.com/tooltip-sequence@0.2.0/dist/index.css">
12-
<script src="https://unpkg.com/tooltip-sequence@0.2.0/dist/index.min.js"></script> -->
9+
<!-- <link rel="stylesheet" href="/main.css" />
10+
<script src="/main.js"></script> -->
11+
<link rel="stylesheet" href="https://unpkg.com/tooltip-sequence@0.2.2/dist/index.css">
12+
<script src="https://unpkg.com/tooltip-sequence@0.2.2/dist/index.min.js"></script>
1313
</head>
14-
<body class="bg-white">
15-
<main class="container mx-auto my-12 px-3 md:px-1" id="main">
14+
<body class="bg-white" style="height: 100vh; width: 100vw; margin: 0; padding: 0">
15+
<main class="container-fluid h-100 w-100 p-0 m-0" id="main">
1616
{{ block "main" . }}{{ end }}
1717
</main>
1818
</body>

0 commit comments

Comments
 (0)