DEV Community: Anand Roshan

Creating Simple Tooltips with Pure CSS as a Beginner

Anand Roshan — Thu, 28 Sep 2023 12:46:31 +0000

Tooltips are a common UI element that provide additional information when users hover over an element. They are often used to clarify the purpose of buttons or icons.

In this tutorial, we will create a simple tooltip using only HTML and CSS. While tooltips can also be created using JavaScript, this tutorial focuses on a pure CSS approach to keep things simple for beginners.

HTML Structure

Let's start by looking at the HTML structure we'll use to create our tooltip:

<div class="tooltip">
    <label class="text">Tooltip</label>
    <button>Hover Me</button>
</div>

We have a <div> element with the class "tooltip" containing two child elements:

A <label> with the class "text" (this will be our tooltip content)
A<button> element (the element we'll hover over to trigger the tooltip).

CSS Styling

Main .tooltip should have a position property.

.tooltip {
    position: relative;
}

This is the styling for the actual tooltip that appears after hovering. If you want, you can change the background-color property or add a border, box-shadow, etc.

.tooltip .text {
    visibility: hidden;
    background-color: #000000;
    color: #ffffff;
    text-align: center;
    box-sizing: border-box;
    padding: 5px 5px;
    border-radius: 5px;
    position: absolute;
    z-index: 1;
    top: -40px;
    font-size: 12px;
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

Then we use the ::after psuedo selector in CSS to create an arrow for the tooltip. Both ::after and :after will work.

.tooltip .text::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #000000;
    position: absolute;
    bottom: -10px;
}

Finally, we make the text visible when the .tooltip is hovered over use :hover psuedo-class.

.tooltip:hover .text {
    visibility: visible;
}

And there you have it! We've created a simple tooltip using pure CSS and HTML.

Certainly, here's an improved and more professional version of the statement:

We can enhance the functionality of this tooltip using JavaScript in several ways, such as automatically detecting screen edges and adjusting the tooltip's position accordingly.

We can optimize the HTML structure by defining the tooltip text within the HTML element as a data attribute, eliminating the need for additional HTML elements and so on.

I'll post it as a separate article.

Also, check out my CSS Tooltip Generator, which will be helpful if you are a beginner.

Blogging with ChatGPT: Essential Additional Tools You Need

Anand Roshan — Mon, 25 Sep 2023 19:50:08 +0000

ChatGPT has become an important tool to create content. Many people are using it for blogging.

Although Google stated that only the quality and relevance of the content matter, regardless of how it was created, you might still want to use some additional tools to make sure your ChatGPT-generated content doesn't look so obviously AI-generated.

All the tools mentioned below are free to use, while some of them have limits in the free version.

Grammar Checker

Multipurpose Editors

Readability Checker

Article Rewriter

Plagiarism Checker

HTML Formatters

Browser Extensions

HARPA AI - multi-purpose AI tool that basically does most of the tasks mentioned above.

Useful Websites for Beginner Web Developers

Anand Roshan — Tue, 19 Sep 2023 12:09:16 +0000

Whether you're looking to build a personal website, explore new career opportunities, or simply dive into the fascinating realm of coding, there's a wealth of resources available to help you along your journey.
In this post, I've compiled a list of essential resources tailored specifically for beginner-level web developers.
These resources cover everything from HTML and CSS to JavaScript and beyond, providing you with the knowledge and tools needed to kickstart your web development adventure. So, let's dive in!

HTML & CSS Resources:

Mozilla Developer Network (MDN)
- MDN Web Docs: An extensive resource offering detailed documentation on HTML and CSS. Perfect for getting started with the basics.
W3Schools
- W3Schools: A beginner-friendly website with interactive tutorials and examples for HTML, CSS, and more.
CoderVortex
- CoderVortex: Collection of free online tools to generate HTML and CSS codes and more.
Codecademy
- Codecademy: Offers interactive coding exercises, including courses on HTML and CSS.
CSS-Tricks
- CSS-Tricks: A treasure trove of CSS tips, tricks, and tutorials.

JavaScript Resources:

freeCodeCamp
- freeCodeCamp: A comprehensive platform that offers JavaScript courses, interactive coding challenges, and projects to build your skills.
JavaScript MDN
- JavaScript MDN: MDN's JavaScript section provides in-depth documentation and tutorials.
Eloquent JavaScript by Marijn Haverbeke
- Eloquent JavaScript: A free online book that covers JavaScript from the ground up.

Coding Practice Platforms:

LeetCode
- LeetCode: Great for sharpening your problem-solving skills with coding challenges.
HackerRank
- HackerRank: Offers coding exercises and competitions, including a "10 Days of JavaScript" tutorial series.

Version Control and Collaboration:

GitHub
- GitHub: Learn how to use Git and GitHub to collaborate with others and manage your code.
BitBucket
- BitBucket: An alternative to GitHub, personally I would use BitBucket for private projects and use GitHub for public projects.

Web Development Frameworks:

Bootstrap
- Bootstrap: A popular CSS framework that simplifies web design.
React
- React: Facebook's JavaScript library for building user interfaces. Start with their official tutorial.
SvelteKit
- SvelteKit: The modern, blazing-fast web application framework that simplifies development with its intuitive approach and seamless transitions

Project-Based Learning:

GitHub Pages
- GitHub Pages: Host your own website for free using GitHub Pages. A great way to showcase your projects.
CodePen
- CodePen: An online code editor that allows you to create and share web projects.

Community and Support:

Stack Overflow
- Stack Overflow: A community of developers who can help answer your coding questions.
Dev.to
- Dev.to: A welcoming platform where developers share knowledge and experiences.

With these resources at your disposal, you're well-equipped to embark on your web development adventure. Happy coding!