Skip to content

WP-96 Tooltip componet with final approach #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Mar 27, 2025
Merged

WP-96 Tooltip componet with final approach #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
889fe8d
WP-96 tooltip first commit
junaidbhura Mar 5, 2025
0b13fe9
WP-96 add tooltip trigger
junaidbhura Mar 5, 2025
4c39b4c
WP-96 set the position of the tooltip
junaidbhura Mar 5, 2025
5419de7
Add styling needed for arrow and minor changes
harshdeep-gill Mar 11, 2025
bac1df8
Add more content to html for debugging edge cases
harshdeep-gill Mar 12, 2025
c9f213a
WP-96 Add arrow styles and position code
harshdeep-gill Mar 19, 2025
54257d0
WP-96 Add window scroll listener and touch devices support
harshdeep-gill Mar 19, 2025
fe305ba
WP-96 Remove redundant code
harshdeep-gill Mar 19, 2025
e7d3201
WP-96 move styles
junaidbhura Mar 27, 2025
fa59158
WP-96 add events and readme
junaidbhura Mar 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

64 changes: 64 additions & 0 deletions src/tooltip/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
# Tooltip

<table width="100%">
<tr>
<td align="left" width="70%">
<p>Built by the super talented team at <strong><a href="https://www.travelopia.com/work-with-us/">Travelopia</a></strong>.</p>
</td>
<td align="center" width="30%">
<img src="https://www.travelopia.com/wp-content/themes/travelopia/assets/svg/logo-travelopia-circle.svg" width="50" />
</td>
</tr>
</table>

## Sample Usage

This is a highly customizable tooltip component.

Example:

```js
// Import the component as needed:
import '@travelopia/web-components/dist/tooltip';
import '@travelopia/web-components/dist/tooltip/style.css';

// No JavaScript is required to initialise!
```

```html
<tp-tooltip id="did-you-know"> <-- Define and style the tooltip, and give it an ID
<tp-tooltip-content>
<slot></slot> <-- This is where the content of the tooltip would go
</tp-tooltip-content>
<tp-tooltip-arrow></tp-tooltip-arrow> <-- If you want an arrow
</tp-tooltip>

<p>
Here is some informative content about

<tp-tooltip-trigger tooltip="did-you-know"> <-- Make any element a tooltip trigger by wrapping this component
<template> <-- Define and style your tooltip's content as needed. Everything inside this will go into the `slot` above
<p>
<img src="">
More information about interesting subject.
</p>
</template>
<a href="#">interesting subject</a> <-- The first direct descendant (that is not a template) is the trigger
</tp-tooltip-trigger>

that you may be interested in!
</p>
```

## Attributes

| Attribute | Required | Values | Notes |
|---------------------|----------|----------|-----------------------------------------------------------------------------------------------------------------|
| offset | No | <number> | The offset in pixels from the trigger that the tooltip should display |

## Events

| Event | Notes |
|-------|-------------------------------|
| show | After the tooltip is visible |
| hide | After the tooltip is hidden |
179 changes: 179 additions & 0 deletions src/tooltip/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Component: Tooltip</title>

<link rel="stylesheet" href="../../dist/tooltip/style.css" media="all">
<script type="module" src="../../dist/tooltip/index.js"></script>
</head>

<body>
<main>

<div>
<tp-tooltip id="anchor-tag-tooltip" style="width: 400px;">
<tp-tooltip-content>
<slot></slot>
</tp-tooltip-content>
<tp-tooltip-arrow></tp-tooltip-arrow>
</tp-tooltip>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero excepturi, esse aperiam omnis voluptatem
et perspiciatis quas nostrum. Modi velit repellat labore illo, laudantium eaque, ea esse tempora earum
natus ullam repudiandae voluptatibus ut perferendis nobis. Nesciunt, possimus accusamus sed dolor
exercitationem repellendus sunt perspiciatis. Nulla saepe assumenda facere. Aliquid et eum accusantium
velit nisi rem, eaque, repudiandae voluptas culpa dolor hic at aperiam dignissimos voluptatum quia,
architecto incidunt! Unde ipsa maiores maxime repellendus, voluptatem assumenda doloribus fugit
necessitatibus ipsam soluta laboriosam voluptas optio a tenetur eveniet nostrum debitis hic, beatae
eos asperiores repellat consectetur animi est dolor? Quis, recusandae neque deserunt asperiores culpa
<tp-tooltip-trigger tooltip="anchor-tag-tooltip">
<template>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio odit, dolor recusandae veniam est molestiae!
</p>
</template>
<a href="#">Paragraph link 1</a>
</tp-tooltip-trigger>
exercitationem autem consequatur, sequi saepe blanditiis, laudantium vel? Voluptates pariatur ducimus
corporis magni. Placeat, fugiat, veniam incidunt dolorum numquam itaque non inventore, aliquam laboriosam
dolor mollitia ipsa! Nemo voluptas, animi corrupti facere perspiciatis commodi voluptatibus sint saepe
suscipit? Molestiae temporibus recusandae delectus molestias, ea, tempora unde, sapiente quae reiciendis
suscipit est? Nemo enim eius suscipit possimus eum debitis adipisci officiis, dolor, iste autem delectus
quam illum ut asperiores expedita impedit ad atque repellat aut quisquam doloremque! Nihil magnam harum
<tp-tooltip-trigger tooltip="anchor-tag-tooltip">
<template>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, tenetur!
</p>
</template>
<a href="#">Paragraph link 2</a>
</tp-tooltip-trigger>
dolores in neque perspiciatis! Velit, repellendus sapiente cumque ullam optio molestias ipsum doloribus
blanditiis. Eum at quibusdam voluptatem fugiat facere omnis ipsam est obcaecati provident laborum dolores
exercitationem aspernatur saepe cumque animi eligendi corrupti, aliquid tenetur. Similique quam accusantium
numquam a, aliquam libero debitis quibusdam consequatur modi doloremque, exercitationem eum temporibus quo
quia velit repellendus, aspernatur eos. Optio exercitationem dolore ipsum alias est quas velit eaque autem
ducim</tp-tooltip-trigger> us. Iusto fugit reiciendis nisi fugiat deserunt, quibusdam doloribus. Eligendi a officia quas totam
adipisci minus voluptatibus dignissimos sed nostrum. Consequatur eos est illo tempore odit, adipisci itaque
<tp-tooltip-trigger tooltip="anchor-tag-tooltip">
<template>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
</p>
</template>
<a href="#">Paragraph link 3</a>
</tp-tooltip-trigger>
magnam, obcaecati ullam possimus ab sint beatae, animi sed mollitia sit perspiciatis eligendi! Tenetur minus
vero soluta amet excepturi sit quia animi.
</p>
</div>

<br/>

<section>
<tp-tooltip offSet="10" id="card-tooltip" style="width: 260px;">
<tp-tooltip-content>
<slot></slot>
</tp-tooltip-content>
<tp-tooltip-arrow></tp-tooltip-arrow>
</tp-tooltip>
<div style="display: flex; flex-wrap: wrap; justify-content: space-around; row-gap: 20px;">
<article style="width: 250px; display: flex; flex-direction: column; border: 1px solid gray;">
<img style="width: 100%;" src="https://picsum.photos/600/300" alt="Card Image">
<tp-tooltip-trigger tooltip="card-tooltip">
<template>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
</p>
</template>
<div style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="card-content">
<h2>Card Title </h2>
<i style="margin-right: 20px;">i</i>
</div>
</tp-tooltip-trigger>
<p>This is a simple description for the card. It provides some basic information about the content displayed above.</p>
</article>
<article style="width: 250px; display: flex; flex-direction: column; border: 1px solid gray;">
<img style="width: 100%;" src="https://picsum.photos/600/300" alt="Card Image">
<tp-tooltip-trigger tooltip="card-tooltip">
<template>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
</p>
</template>
<div style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="card-content">
<h2>Card Title </h2>
<i style="margin-right: 20px;">i</i>
</div>
</tp-tooltip-trigger>
<p>This is a simple description for the card. It provides some basic information about the content displayed above.</p>
</article>
<article style="width: 250px; display: flex; flex-direction: column; border: 1px solid gray;">
<img style="width: 100%;" src="https://picsum.photos/600/300" alt="Card Image">
<tp-tooltip-trigger tooltip="card-tooltip">
<template>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
</p>
</template>
<div style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="card-content">
<h2>Card Title </h2>
<i style="margin-right: 20px;">i</i>
</div>
</tp-tooltip-trigger>
<p>This is a simple description for the card. It provides some basic information about the content displayed above.</p>
</article>
<article style="width: 250px; display: flex; flex-direction: column; border: 1px solid gray;">
<img style="width: 100%;" src="https://picsum.photos/600/300" alt="Card Image">
<tp-tooltip-trigger tooltip="card-tooltip">
<template>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
</p>
</template>
<div style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="card-content">
<h2>Card Title </h2>
<i style="margin-right: 20px;">i</i>
</div>
</tp-tooltip-trigger>
<p>This is a simple description for the card. It provides some basic information about the content displayed above.</p>
</article>
<article style="width: 250px; display: flex; flex-direction: column; border: 1px solid gray;">
<img style="width: 100%;" src="https://picsum.photos/600/300" alt="Card Image">
<tp-tooltip-trigger tooltip="card-tooltip">
<template>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
</p>
</template>
<div style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="card-content">
<h2>Card Title </h2>
<i style="margin-right: 20px;">i</i>
</div>
</tp-tooltip-trigger>
<p>This is a simple description for the card. It provides some basic information about the content displayed above.</p>
</article>
<article style="width: 250px; display: flex; flex-direction: column; border: 1px solid gray;">
<img style="width: 100%;" src="https://picsum.photos/600/300" alt="Card Image">
<tp-tooltip-trigger tooltip="card-tooltip">
<template>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempora quis aspernatur. Officiis?
</p>
</template>
<div style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="card-content">
<h2>Card Title </h2>
<i style="margin-right: 20px;">i</i>
</div>
</tp-tooltip-trigger>
<p>This is a simple description for the card. It provides some basic information about the content displayed above.</p>
</article>
</div>
</section>

</main>
</body>
</html>
18 changes: 18 additions & 0 deletions src/tooltip/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* Styles.
*/
import './style.scss';

/**
* Components.
*/
import { TPTooltip } from './tp-tooltip';
import { TPTooltipTrigger } from './tp-tooltip-trigger';
import { TPTooltipArrow } from './tp-tooltip-arrow';

/**
* Register Components.
*/
customElements.define( 'tp-tooltip', TPTooltip );
customElements.define( 'tp-tooltip-trigger', TPTooltipTrigger );
customElements.define( 'tp-tooltip-arrow', TPTooltipArrow );
41 changes: 41 additions & 0 deletions src/tooltip/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
tp-tooltip {
border: 1px solid #000;

&[popover] {
overflow: visible;
margin: 0;
padding: 0;
}

tp-tooltip-content {
position: relative;
display: block;
z-index: 10;
}

tp-tooltip-arrow {
position: absolute;
display: block;
z-index: 5;
border: 1px solid #000;
width: 15px;
height: 15px;
background-color: #fff;

&[position="top"] {
top: -1px;
transform: translateY(-50%) translateX(-50%) rotate(45deg);
border-right: none;
border-bottom: none;
}

&[position="bottom"] {
bottom: -1px;
transform: translateY(50%) translateX(-50%) rotate(45deg);
border-left: none;
border-top: none;
}
}
}


5 changes: 5 additions & 0 deletions src/tooltip/tp-tooltip-arrow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/**
* TP Tooltip Arrow.
*/
export class TPTooltipArrow extends HTMLElement {
}
Loading