Dynamic Tooltip

Flowchart of how things are working:

Deployed site

Click here

About the App

In-app nudges serve as non-intrusive aides for various mobile app features. So the application Sets up tooltips that will help draw attention to a specific screen element. A frontend application that renders a tooltip with dynamic positioning, design, and text, as well as a live preview of the tooltip while it is being rendered, without the use of predefined libraries.

Demo: https://drive.google.com/file/d/1flMgEeK_VPDqM6EyGsy8P2UjPgVn8iFX/view?pli=1

(back to top)

Key Features

• Customise your own tooltip
• Live modile emulator rendering
• Responsive in any device
• Toast to clarify the constraints

Tech Stack

• NodeJS
• Netlify
• Docker
• Figma

(back to top)

Getting Started

Prerequisites

Install Node.js and npm

Setup

Clone the repo

git clone https://github.com/sanz17/dynamic-tooltip.git

Change into the directory, and install the required dependencies

cd dynamic-tooltip
npm i

(back to top)

Usage

Local Run

Start the server instance

npm start
OR
npm run dev (for development environment)

Docker Run

Start the server instance

cd dynamic-tooltip
docker build -t dynamic-tooltip .
docker run -it dynamic-tooltip

(back to top)

Folder Structure

├──Dockerfile
├──.dockerignore
├── Perfect.png
├── package.json
├── package-lock.json
├── .gitignore
├── src
│   ├── components
|   |   ├──Footer.js
|   |   ├──Home.js
|   |   ├──Left.js
|   |   ├──Right.js
|   |   └──Right.css
│   ├── App.js
│   ├── App.css
|   ├──App.test.js
|   ├──index.css
|   ├──index.js
|   ├──reportWebVitals.js
│   └── setupTests.js
└── public
    ├── manifest.json
    └── index.html

(back to top)

Limitations

Since the frontend is dynamic and user-customizable, the px level values must be within range so that the document's formatting is not compromised.

The ranges are mentioned in a toast of the app:

• Text size 25px range
• Padding 20px range
• Tooltip width 150-300px
• Arrowtip height < 10px

We are using ReactJS for more dynamic and lightweight code because although NextJS is superior for applications with multiple routes, but our application doesnot need a redirection feature.

The perfect values as input can be

Possible Solution

Contrary to initial impressions with NextJS, the lack of routing doesn't prevent us from crafting the frontend of our application in React. We need a connection handling mechanism that mirrors JavaScript's functionalities, yet is inherently designed for browser-based environments.

By creating a solution that emulates a mobile screen capabilities but is tailored for browser compatibility, we're able to build a robust Dynamic tooltip application. This application combines the sophisticated UI potential of React.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Contact

Sanhita Kundu - kundusanhita13@gmail.com

GitHub Link: https://github.com/sanz17

(back to top)

Made with ❤ by Sanhita Kundu