Skip to content

Commit 39afc42

Browse files
junaid-travelopiajunaid-travelopia
authored
Merge pull request #105 from Travelopia/feature/WP-96-tooltip-component
WP-96 Tooltip componet with final approach
2 parents 261a7e2 + fa59158 commit 39afc42

File tree

9 files changed

+619
-3
lines changed

9 files changed

+619
-3
lines changed

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/tooltip/README.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# Tooltip
2+
3+
<table width="100%">
4+
<tr>
5+
<td align="left" width="70%">
6+
<p>Built by the super talented team at <strong><a href="https://www.travelopia.com/work-with-us/">Travelopia</a></strong>.</p>
7+
</td>
8+
<td align="center" width="30%">
9+
<img src="https://www.travelopia.com/wp-content/themes/travelopia/assets/svg/logo-travelopia-circle.svg" width="50" />
10+
</td>
11+
</tr>
12+
</table>
13+
14+
## Sample Usage
15+
16+
This is a highly customizable tooltip component.
17+
18+
Example:
19+
20+
```js
21+
// Import the component as needed:
22+
import '@travelopia/web-components/dist/tooltip';
23+
import '@travelopia/web-components/dist/tooltip/style.css';
24+
25+
// No JavaScript is required to initialise!
26+
```
27+
28+
```html
29+
<tp-tooltip id="did-you-know"> <-- Define and style the tooltip, and give it an ID
30+
<tp-tooltip-content>
31+
<slot></slot> <-- This is where the content of the tooltip would go
32+
</tp-tooltip-content>
33+
<tp-tooltip-arrow></tp-tooltip-arrow> <-- If you want an arrow
34+
</tp-tooltip>
35+
36+
<p>
37+
Here is some informative content about
38+
39+
<tp-tooltip-trigger tooltip="did-you-know"> <-- Make any element a tooltip trigger by wrapping this component
40+
<template> <-- Define and style your tooltip's content as needed. Everything inside this will go into the `slot` above
41+
<p>
42+
<img src="">
43+
More information about interesting subject.
44+
</p>
45+
</template>
46+
<a href="#">interesting subject</a> <-- The first direct descendant (that is not a template) is the trigger
47+
</tp-tooltip-trigger>
48+
49+
that you may be interested in!
50+
</p>
51+
```
52+
53+
## Attributes
54+
55+
| Attribute | Required | Values | Notes |
56+
|---------------------|----------|----------|-----------------------------------------------------------------------------------------------------------------|
57+
| offset | No | <number> | The offset in pixels from the trigger that the tooltip should display |
58+
59+
## Events
60+
61+
| Event | Notes |
62+
|-------|-------------------------------|
63+
| show | After the tooltip is visible |
64+
| hide | After the tooltip is hidden |

‎src/tooltip/index.html‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Web Component: Tooltip</title>
9+
10+
<link rel="stylesheet" href="../../dist/tooltip/style.css" media="all">
11+
<script type="module" src="../../dist/tooltip/index.js"></script>
12+
</head>
13+
14+
<body>
15+
<main>
16+
17+
<div>
18+
<tp-tooltip id="anchor-tag-tooltip" style="width: 400px;">
19+
<tp-tooltip-content>
20+
<slot></slot>
21+
</tp-tooltip-content>
22+
<tp-tooltip-arrow></tp-tooltip-arrow>
23+
</tp-tooltip>
24+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero excepturi, esse aperiam omnis voluptatem
25+
et perspiciatis quas nostrum. Modi velit repellat labore illo, laudantium eaque, ea esse tempora earum
26+
natus ullam repudiandae voluptatibus ut perferendis nobis. Nesciunt, possimus accusamus sed dolor
27+
exercitationem repellendus sunt perspiciatis. Nulla saepe assumenda facere. Aliquid et eum accusantium
28+
velit nisi rem, eaque, repudiandae voluptas culpa dolor hic at aperiam dignissimos voluptatum quia,
29+
architecto incidunt! Unde ipsa maiores maxime repellendus, voluptatem assumenda doloribus fugit
30+
necessitatibus ipsam soluta laboriosam voluptas optio a tenetur eveniet nostrum debitis hic, beatae
31+
eos asperiores repellat consectetur animi est dolor? Quis, recusandae neque deserunt asperiores culpa
32+
<tp-tooltip-trigger tooltip="anchor-tag-tooltip">
33+
<template>
34+
<p>
35+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio odit, dolor recusandae veniam est molestiae!
36+
</p>
37+
</template>
38+
<a href="#">Paragraph link 1</a>
39+
</tp-tooltip-trigger>
40+
exercitationem autem consequatur, sequi saepe blanditiis, laudantium vel? Voluptates pariatur ducimus
41+
corporis magni. Placeat, fugiat, veniam incidunt dolorum numquam itaque non inventore, aliquam laboriosam
42+
dolor mollitia ipsa! Nemo voluptas, animi corrupti facere perspiciatis commodi voluptatibus sint saepe
43+
suscipit? Molestiae temporibus recusandae delectus molestias, ea, tempora unde, sapiente quae reiciendis
44+
suscipit est? Nemo enim eius suscipit possimus eum debitis adipisci officiis, dolor, iste autem delectus
45+
quam illum ut asperiores expedita impedit ad atque repellat aut quisquam doloremque! Nihil magnam harum
46+
<tp-tooltip-trigger tooltip="anchor-tag-tooltip">
47+
<template>
48+
<p>
49+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, tenetur!
50+
</p>
51+
</template>
52+
<a href="#">Paragraph link 2</a>
53+
</tp-tooltip-trigger>
54+
dolores in neque perspiciatis! Velit, repellendus sapiente cumque ullam optio molestias ipsum doloribus
55+
blanditiis. Eum at quibusdam voluptatem fugiat facere omnis ipsam est obcaecati provident laborum dolores
56+
exercitationem aspernatur saepe cumque animi eligendi corrupti, aliquid tenetur. Similique quam accusantium
57+
numquam a, aliquam libero debitis quibusdam consequatur modi doloremque, exercitationem eum temporibus quo
58+
quia velit repellendus, aspernatur eos. Optio exercitationem dolore ipsum alias est quas velit eaque autem
59+
ducim</tp-tooltip-trigger> us. Iusto fugit reiciendis nisi fugiat deserunt, quibusdam doloribus. Eligendi a officia quas totam
60+
adipisci minus voluptatibus dignissimos sed nostrum. Consequatur eos est illo tempore odit, adipisci itaque
61+
<tp-tooltip-trigger tooltip="anchor-tag-tooltip">
62+
<template>
63+
<p>
64+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
65+
</p>
66+
</template>
67+
<a href="#">Paragraph link 3</a>
68+
</tp-tooltip-trigger>
69+
magnam, obcaecati ullam possimus ab sint beatae, animi sed mollitia sit perspiciatis eligendi! Tenetur minus
70+
vero soluta amet excepturi sit quia animi.
71+
</p>
72+
</div>
73+
74+
<br/>
75+
76+
<section>
77+
<tp-tooltip offSet="10" id="card-tooltip" style="width: 260px;">
78+
<tp-tooltip-content>
79+
<slot></slot>
80+
</tp-tooltip-content>
81+
<tp-tooltip-arrow></tp-tooltip-arrow>
82+
</tp-tooltip>
83+
<div style="display: flex; flex-wrap: wrap; justify-content: space-around; row-gap: 20px;">
84+
<article style="width: 250px; display: flex; flex-direction: column; border: 1px solid gray;">
85+
<img style="width: 100%;" src="https://picsum.photos/600/300" alt="Card Image">
86+
<tp-tooltip-trigger tooltip="card-tooltip">
87+
<template>
88+
<p>
89+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
90+
</p>
91+
</template>
92+
<div style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="card-content">
93+
<h2>Card Title </h2>
94+
<i style="margin-right: 20px;">i</i>
95+
</div>
96+
</tp-tooltip-trigger>
97+
<p>This is a simple description for the card. It provides some basic information about the content displayed above.</p>
98+
</article>
99+
<article style="width: 250px; display: flex; flex-direction: column; border: 1px solid gray;">
100+
<img style="width: 100%;" src="https://picsum.photos/600/300" alt="Card Image">
101+
<tp-tooltip-trigger tooltip="card-tooltip">
102+
<template>
103+
<p>
104+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
105+
</p>
106+
</template>
107+
<div style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="card-content">
108+
<h2>Card Title </h2>
109+
<i style="margin-right: 20px;">i</i>
110+
</div>
111+
</tp-tooltip-trigger>
112+
<p>This is a simple description for the card. It provides some basic information about the content displayed above.</p>
113+
</article>
114+
<article style="width: 250px; display: flex; flex-direction: column; border: 1px solid gray;">
115+
<img style="width: 100%;" src="https://picsum.photos/600/300" alt="Card Image">
116+
<tp-tooltip-trigger tooltip="card-tooltip">
117+
<template>
118+
<p>
119+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
120+
</p>
121+
</template>
122+
<div style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="card-content">
123+
<h2>Card Title </h2>
124+
<i style="margin-right: 20px;">i</i>
125+
</div>
126+
</tp-tooltip-trigger>
127+
<p>This is a simple description for the card. It provides some basic information about the content displayed above.</p>
128+
</article>
129+
<article style="width: 250px; display: flex; flex-direction: column; border: 1px solid gray;">
130+
<img style="width: 100%;" src="https://picsum.photos/600/300" alt="Card Image">
131+
<tp-tooltip-trigger tooltip="card-tooltip">
132+
<template>
133+
<p>
134+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
135+
</p>
136+
</template>
137+
<div style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="card-content">
138+
<h2>Card Title </h2>
139+
<i style="margin-right: 20px;">i</i>
140+
</div>
141+
</tp-tooltip-trigger>
142+
<p>This is a simple description for the card. It provides some basic information about the content displayed above.</p>
143+
</article>
144+
<article style="width: 250px; display: flex; flex-direction: column; border: 1px solid gray;">
145+
<img style="width: 100%;" src="https://picsum.photos/600/300" alt="Card Image">
146+
<tp-tooltip-trigger tooltip="card-tooltip">
147+
<template>
148+
<p>
149+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
150+
</p>
151+
</template>
152+
<div style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="card-content">
153+
<h2>Card Title </h2>
154+
<i style="margin-right: 20px;">i</i>
155+
</div>
156+
</tp-tooltip-trigger>
157+
<p>This is a simple description for the card. It provides some basic information about the content displayed above.</p>
158+
</article>
159+
<article style="width: 250px; display: flex; flex-direction: column; border: 1px solid gray;">
160+
<img style="width: 100%;" src="https://picsum.photos/600/300" alt="Card Image">
161+
<tp-tooltip-trigger tooltip="card-tooltip">
162+
<template>
163+
<p>
164+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
165+
</p>
166+
</template>
167+
<div style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="card-content">
168+
<h2>Card Title </h2>
169+
<i style="margin-right: 20px;">i</i>
170+
</div>
171+
</tp-tooltip-trigger>
172+
<p>This is a simple description for the card. It provides some basic information about the content displayed above.</p>
173+
</article>
174+
</div>
175+
</section>
176+
177+
</main>
178+
</body>
179+
</html>

‎src/tooltip/index.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* Styles.
3+
*/
4+
import './style.scss';
5+
6+
/**
7+
* Components.
8+
*/
9+
import { TPTooltip } from './tp-tooltip';
10+
import { TPTooltipTrigger } from './tp-tooltip-trigger';
11+
import { TPTooltipArrow } from './tp-tooltip-arrow';
12+
13+
/**
14+
* Register Components.
15+
*/
16+
customElements.define( 'tp-tooltip', TPTooltip );
17+
customElements.define( 'tp-tooltip-trigger', TPTooltipTrigger );
18+
customElements.define( 'tp-tooltip-arrow', TPTooltipArrow );

‎src/tooltip/style.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
tp-tooltip {
2+
border: 1px solid #000;
3+
4+
&[popover] {
5+
overflow: visible;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
tp-tooltip-content {
11+
position: relative;
12+
display: block;
13+
z-index: 10;
14+
}
15+
16+
tp-tooltip-arrow {
17+
position: absolute;
18+
display: block;
19+
z-index: 5;
20+
border: 1px solid #000;
21+
width: 15px;
22+
height: 15px;
23+
background-color: #fff;
24+
25+
&[position="top"] {
26+
top: -1px;
27+
transform: translateY(-50%) translateX(-50%) rotate(45deg);
28+
border-right: none;
29+
border-bottom: none;
30+
}
31+
32+
&[position="bottom"] {
33+
bottom: -1px;
34+
transform: translateY(50%) translateX(-50%) rotate(45deg);
35+
border-left: none;
36+
border-top: none;
37+
}
38+
}
39+
}
40+
41+

‎src/tooltip/tp-tooltip-arrow.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/**
2+
* TP Tooltip Arrow.
3+
*/
4+
export class TPTooltipArrow extends HTMLElement {
5+
}

0 commit comments

Comments
 (0)