Tooltip Generator

Table of Contents

• Description
• Demo
• Installation
• Usage
• Features
• Technologies Used
• Future Enhancements
• Contact

Description

Tooltip Generator is a frontend application built using React.js that renders interactive tooltips with dynamic positioning, style, and text. The app allows users to set the target element, position (top/right/bottom/left), style, and text of the tooltip. It provides a real-time preview of a mobile screen with button elements, and each button acts as a target element for the tooltip. The tooltip component is custom-built and positioned without using any additional libraries.

The app also offers a bonus feature where users can include an image inside the tooltip, providing additional customization options. Furthermore, the data used to build the tooltips is persistent, ensuring that the user's preferences are saved even after refreshing the page or revisiting the app.

Demo

Live Demo (https://smalik-tooltip-generator.netlify.app/)

Installation

• Clone the repository.
• Install the required dependencies using npm install.

Usage

• Run the development server using npm run dev.
• Open the app in your web browser (http://localhost:5173).

Features

• Set target element, position, style, and text of the tooltip.
• Real-time preview of tooltips on a mobile screen with interactive buttons.
• Custom-built tooltip component without additional libraries.
• Ability to include an image inside the tooltip.
• Persistent storage of tooltip data.

Technologies Used

• React.js
• HTML
• CSS
• JavaScript
• Local Storage

Future Enhancements

The following are some potential future enhancements for the Tooltip App:

• Add animation effects to the tooltips for a smoother user experience.
• Allow users to customize the tooltip arrow's shape and color.
• Implement internationalization (i18n) for multi-language support.
• Provide options for users to share their tooltip designs on social media.