Creating a CSS tooltip using only HTML and CSS may present some challenges and not function as intended

I've been attempting to create a basic tooltip using only CSS3 and HTML, but for some reason the transition isn't functioning. Can someone help me identify what I might be doing incorrectly?

HTML Structure

<p>
    This paragraph has a tooltip
</p>
<div class="tooltip">Tooltip content goes here</div>

CSS Styling

p {
    width: 200px;
    background-color: aqua;
    padding: 10px;
    margin-top: 50px;
}

div.tooltip {
    position: absolute;
    width: auto;
    padding: 10px;
    background-color: rgba(0,0,0, 0.5);
    top: 0px;
    display: none;
    opacity: 0.0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

p:hover + div.tooltip {
    display: block;
    opacity: 1.0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

Link to the project on JSFiddle

htmlcss

Answer №1

Update: Different Approach

If you want to implement a CSS3 solution for modern browsers, consider using pseudo elements.

<span data-tooltip="I am the tooltip">This has a tooltip</span>

Additionally, you can use the following CSS code:

[data-tooltip]{
    position:relative;
}
[data-tooltip]:before{
    content:attr(data-tooltip);
    position:absolute;
    bottom:110%;
    padding:10px;
    background:#666;
    opacity:0;
    color:white;
    font-size:smaller;
    -webkit-transition:opacity 1s ease;
    -o-transition:opacity 1s ease;
    transition:opacity 1s ease;
    pointer-events:none;
}
[data-tooltip]:hover:before{
    opacity:1;
}

Check out the demo: http://jsfiddle.net/BJ2tr/

(Note that you can also achieve this without pseudo-elements by nesting the tooltip within the referenced elements and adjusting the CSS accordingly)

Unfortunately, if you switch from display: none to another value, transitions will not work as expected.

Instead of using display: none, consider positioning the element off-screen (using top: -9999px) and then bringing it into view when needed.

div.tooltip {
    position: absolute;
    width: auto;
    padding: 10px;
    background-color: rgba(0,0,0, 0.5);
    top: -999px; /*UPDATED AND REMOVED display:none*/
    display: none;
    opacity: 0.0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

p:hover + div.tooltip {
    opacity: 1.0;
    top: 0px; /*ADJUSTED AND REMOVED display:block*/
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

Keep in mind that this method may not result in a fade-out effect (it will appear to instantly disappear) due to its movement off-screen when the mouse leaves the element.

Answer №2

Explanation

Make sure to apply the transition property not just on opacity, but also on display:block;. This will ensure that when the element changes to display as a block, it does so smoothly with an opacity of 1 by default.

Solution

(JSFiddle)

To fix this issue, remove both display:none; and display:block from your tooltip element's CSS.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to adjust the position of the previous and next buttons on a Bootstrap 5 carousel?

I am having trouble figuring out how to properly position the previous and next buttons in a bootstrap5 carousel. The original code I used as a template was for a carousel that displayed 4 images at once, but I changed it to display 3 images at once. I a ...

htmlcssbuttoncarouselbootstrap-5

What is the process for uploading an image and entering text into the same row in Google Sheets?

Hello, I am currently working on a Google Script web app that enables users to upload 10 photos along with comments for each photo. This information will then be inserted into a Google Sheet when the user clicks the 'upload' button on the web app ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

The title in my div class doesn't seem to be properly centered, even though I have set the margin to auto. What steps can I take to correct this issue?

My div is set to have a margin:auto, but the h1 inside is not centered as expected. I've tried various solutions, but none seem to work. Can someone please help me get it centered properly? body { background: #5D6D7E; color: wh ...

htmlcsswebmargin

Enable the ability for anchor links to be clickable when the CSS media print format is used to generate

To illustrate: <a href="https://www.google.com">Google anchor link</a> on the website, it displays as: Google anchor link When printed, it shows as: Google anchor link(https://www.google.com) To address this issue, I included in the CSS: ...

javascriptjquerycsspdf

Exploring the potential of Django to efficiently implement multiple listviews on a single webpage

Recently started working with Python and Django, but I may have bitten off more than I can chew. If anyone has the time to help educate me, I would greatly appreciate it. My main model deals with "work orders," each of which is linked to subsets of data. I ...

pythonhtmldjango

Tips for incorporating Bootstrap classes into a React project, setting the className attribute to an empty string

After setting up Bootstrap and Create-React-App using npm on my local machine, I proceeded to create a new React app. The first component I worked on was counter.jsx: import React, { Component } from 'react'; class Counter extends Component { ...

javascriptcssreactjsbootstrap-4

Unveiling the Secrets of Implementing Interactive HTML Tabs

I have a simple HTML page that contains a table with two columns and two rows. My goal is to convert these two columns into tabs, so that when each row is clicked, it will display either a paragraph or another basic table with one row and column. All of t ...

jquerycssajaxhtml

Exploring the World of 2D Array Animation

I'm in the process of creating a Pacman ghost using visual 2D arrays. I would like the ghost to move similar to this: https://i.sstatic.net/KPmUt.gif I am considering implementing CSS transitions for the movement, but I'm unsure about how to do ...

javascriptcssarrays

Achieving left text alignment in CSS for an excerpt using the Ultimate Posts Widget on Wordpress

I've been trying to align the text in the excerpt of a widget called "To-Do List" on the left sidebar. I attempted to set the text-align property to left for the excerpt text, targeting the p tag within the .widget_ultimate_posts, .uw posts using CSS ...

htmlcsswordpress

Is there a way for me to implement my custom CSS design within the Material UI Textfield component?

I have a project in Next.js where I need to create a registration form with custom styles. The issue I'm facing is that I'm struggling to customize a textField using my own CSS. I attempted to use the makeStyles function, but encountered a proble ...

cssreactjsmaterial-uinext.js

Is it possible to adjust the button's position based on the location of the cursor?

I am just starting to learn JavaScript, so I am not yet familiar with all the commands involved. I have a code that includes a button which scrolls back to the top of the page, but I was wondering if there is a way to change the position of that button bas ...

htmlcssbuttonpositioncursor

REST and using a passed authentication token

As I embark on my first journey into REST programming, I find myself grappling with the challenge of passing the session token. Despite scouring various forums for similar issues, I have yet to find a solution. Here is a snippet of Ruby code that I am cur ...

htmlrubyjsonrest

Having trouble with the display of styles on Material UI Cards?

I am currently attempting to customize the default Material UI classes by using useStyles and applying a classname of titleSection. My goal is to make the titleSection bold and in Roboto font, but unfortunately, those styles are not being applied. Below i ...

cssreactjsmaterial-uistyling

Adding content to an empty element will not produce the desired result

I'm trying to show each character of a string, which is stored in an array, one at a time. However, when I use threadsleep(a) with the code found here: http://jsfiddle.net/thefiddler99/re3qpuoo/, all the characters are displayed at once. There seems t ...

javascriptjqueryhtml

``Stylishly Designed CSS Tabs inspired by Google Chrome's Modern

Utilizing Material UI Tabs in React to create curved tabs resembling those seen in Google Chrome. The design requires the parent element to have a bottom border that extends across the entire row, appearing on both the tabs and other content on the right. ...

cssmaterial-uitabs

Adding Text Above a Material Icon in Angular: A Guide

Here is some sample HTML code to consider: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <mat-icon class="fa fa-folder" style="font-size:48px;"><span style="color: re ...

htmlcssangulariconsmat

Tips for halting the live graph plotting based on a specific condition with canvas js

I have a piece of code that generates a live graph based on probabilities. I am looking for a way to stop the plotting process as soon as a specific condition is met. <script> window.onload = function () { var dps = []; // dataPoints var c ...

javascripthtmlcanvasjs

scraping text content from a CSS node using Scrapy

My goal is to extract a catalog ID number from the following webpage: from scraping.selector import Selector from scraping.http import HtmlResponse url = 'http://www.enciclovida.mx/busquedas/resultados?utf8=%E2%9C%93&busqueda=basica&id=& ...

pythoncssscrapy

What is the best way to loop through an array of JSON data in order to consistently retrieve the initial JSON object?

How can I retrieve only the full highlight videos from the JSON object in the video array? { "response": [ { title: "United vd Chelsea", "videos": [ { "title": "Highlights&quo ...

htmlarraysjsonangular

How does JQuery handle color parsing in text?

Is there a way to automatically parse colors in text and apply them to CSS? For instance, if I type #40464f, I want the color to be caught and included in some CSS styles. I am familiar with how to achieve this by adding markup: <span data-color=""> ...

jquerycsscolors