From fcac62c6bded4c8e8dfe3b95cca7fd64a2515953 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 3 Sep 2024 18:51:16 +0100 Subject: [PATCH] Add tooltip ui project --- src/data/projects/tooltip-ui.md | 36 +++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/data/projects/tooltip-ui.md diff --git a/src/data/projects/tooltip-ui.md b/src/data/projects/tooltip-ui.md new file mode 100644 index 000000000..936033391 --- /dev/null +++ b/src/data/projects/tooltip-ui.md @@ -0,0 +1,36 @@ +--- +title: 'Tooltip UI' +description: 'Create a tooltip for navigation items using only HTML and CSS.' +isNew: false +sort: 9 +difficulty: 'beginner' +nature: 'CSS' +skills: + - 'HTML' + - 'CSS' + - 'Positioning' + - 'Hover Effects' +seo: + title: 'Create a CSS Tooltip for Navigation Items' + description: 'Learn how to create a tooltip that appears above navigation items on hover using only HTML and CSS.' + keywords: + - 'css tooltip' + - 'hover effects' + - 'navigation menu' + - 'html and css' +roadmapIds: + - 'frontend' + +--- + +In this project, you are required to create a tooltip that appears above navigation items when hovered, using only HTML and CSS. A tooltip is a small pop-up box that provides additional information about a navigation item when a user hovers over it. This project will focus on mastering CSS positioning, hover effects, and creating visually appealing tooltips without relying on JavaScript. + +The goal of this project is to help you understand how to use CSS for dynamic UI effects. You will learn how to position elements relative to each other, create smooth transitions, and make your navigation more interactive and user-friendly. Below is a rough mockup showing the tooltip appearing above a navigation item. + +[![Tooltip Mockup](https://assets.roadmap.sh/guest/tooltip-zh8gm.png)](https://assets.roadmap.sh/guest/tooltip-zh8gm.png) + + + +--- + +After completing this project, you will be able to create interactive and visually appealing tooltips using only CSS. These skills can be further applied to enhance user interfaces in various web projects. \ No newline at end of file