The hover effect on <a> does not display the tooltip

Having an issue with the tooltip not displaying on hover as expected. I am using only CSS, no JavaScript included. Any assistance would be greatly appreciated!

.tooltip{
        position: relative;
        opacity: 0;
        padding: 10px;
        background: #9B59B6;
        border-radius: 5px;

    -webkit-transition:all 0.2s ease-in;
      -moz-transition:all 0.2s ease-in;
            transition:all 0.2s ease-in;
     }

HTML :

<div class="wrapper">
  <span class="tooltip">Hello ! This is tooltip....</span>
  <a href="#" class="show">Hover Me !</a>
</div>
htmlcss

Answer №1

To create the animation, you'll need to include some code.

In the example below, I've placed the <span> inside the <a> tag to utilize the :hover effect.

<div class="wrapper">
  <a href="#" class="show">
     Hover Me !
     <span class="tooltip">Hello! This is a tooltip...</span>
  </a>
</div> 

a:hover span {
    opacity:1;
}

http://jsfiddle.net/6RV5n/

UPDATE:

Here's the same idea but using a CSS adjacent sibling selector instead of nesting the elements:

<div class="wrapper">
 <a href="#" class="show">Hover Me !</a>
 <span class="tooltip">Hello! This is a tooltip...</span>
</div>

a.show:hover + span.tooltip {
    opacity:1;
}

http://jsfiddle.net/7pT8Y/3/

Note that CSS sibling selectors may not be supported in older versions of Internet Explorer.

Answer №2

If you're looking to show a tooltip when the user hovers over the div container, you can achieve this using the following CSS.

.container:hover > .tooltip {
    opacity: 1;
}

Take a look at the example here: http://jsfiddle.net/TsQB5/

[UPDATED]

.tooltip {
     display:none;
 }

 .show:hover > .tooltip {
     display: block;
 }

Implementing this solution should address the issue effectively.

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

Discovering the window.scrollTop, ScrollY, or any other distance value while utilizing CSS scroll snap can be achieved by following these

I am currently utilizing css scroll snap for smooth scrolling through sections that are 100vh in height. The functionality of the scroll snap is quite impressive. However, I need to find a way to determine the exact distance the user has scrolled down the ...

javascriptcssscroll-snap

Querying with jQuery to Retrieve HTML from Elements with the Same Class

Greetings Everyone! Please take a look at my code... <font class="detDesc" > Uploaded 07-11&nbsp;2012, Size 105.79&nbsp;MiB, ULed by <a class="detDesc" href="/somelink" title="somelink title">somelink</a> </font> ...

javascriptjqueryhtmlcss

Trigger a function in AngularJS when a div is scrolled to within a specific number of pixels from the bottom of the screen

I am experimenting with the AngularJS infinite-scroll directive. Below is the code snippet: angular.module('infiniteScroll', []) .directive('infiniteScroll', [ "$window", function ($window) { return { link:funct ...

javascripthtmlangularjsangularjs-directiveinfinite-scroll

Convert to cshtml and retrieve the logged-in user's identification

I'm completely new to using AngularJS. I recently developed a demo login app, but I'm facing an issue where the page doesn't render even when the login id and password are correct. Code: app.controller('MainCtrl', ['$scope&ap ...

htmlangularjsasp.net-mvc

Trouble with ASP.NET Master Page CSS Rendering Incorrectly

My CSS seems to be causing some trouble as the DIVs are not aligning as they should. Instead, they are just wrapping around the text and not adjusting the page layout properly. Here is an example of my CSS: body { height: 95%; width: 100%; ma ...

htmlcssasp.net

The functionality of jQuery's slideUp and slideDown is not performing as intended

I am trying to implement a feature where a div element will hide and show based on a checkbox selection using jQuery's slideUp() and slideDown() functions. The structure of my div is as follows: <div class="parent"> <label class="childLe ...

jqueryhtmlcss

Angular 7: How to Ensure Your Video's Current Time is Always 0

I am trying to adjust the playback of my video using a range input, but I am encountering an issue. Even when I set video.currentTime to 2, it remains stuck at 0 and the value never changes. Below is the code snippet from my angular 7 project: index.co ...

htmlangularangular7webapi

checkbox-activated navigation bar

Struggling to implement a Nav-drawer that should open when a checkbox is selected, everything seems to be set up correctly but the issue arises when it comes to actually opening it. Here is the code snippet: <div class="leftside"> <input typ ...

htmlcssnav

Create a design where the logo seems to be suspended from the navigation bar using bootstrap

My goal is to achieve a navigation bar similar to the one shown in this image: Using Bootstrap 3, the code below is what I have implemented for my navigation: <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <di ...

htmlcsstwitter-bootstrap-3nav

Make cards disappear with a sleek scrolling effect in Angular (I'm open to library recommendations)

I want the cards to appear on the screen as I scroll. My knowledge of angular animation is limited, but I have used it for now. html: <div class="row" *ngIf="posts"> <div id="feed-{{post.id}}" (click)="getFeed(post)" *ngFor="let post of posts ...

cssangularanimationangular-animations

Ensure there is a blank space preceding a table only when the table is being physically printed

I am currently in the process of developing a report card system for students in grades K-6. The report card will display specific tables based on the student's grade level. For example, a 5th grader may not have a "Reading Stage" table displayed on t ...

htmlcss

Guide to creating a versatile script that adjusts height in JavaScript

If you want to adjust the height of an element using JavaScript, you can do something like this: function changeHeight(elementId) { document.getElementById(elementId).style.height = "200px"; } <button type="button" onClick="changeHeight('chart ...

javascripthtmlcssweb

What are some alternative methods for downloading the latest file version without relying on the client cache?

On my webpage, I have a table displaying users' data. Each row represents a user and includes their business card, which is a clickable tag that opens a PDF file stored on the server. <td class="business_card"> <a href="/static/users_doc ...

javascripthtmlbrowser-cache

What is the best way to insert a Bootstrap Glyphicon into an asp:TextBox within ASP.Net Webforms?

Can a Glyphicon be displayed in an <asp:TextBox> control? I attempted the following: <div class="col-md-10 has-feedback"> <asp:TextBox runat="server" ID="txtFullName" CssClass="form-control" MaxLength="50" /> <i class="glyph ...

htmlasp.nettwitter-bootstraptwitter-bootstrap-3webforms

Ways to fetch additional Product Cards using JSON and a nextPage parameter

I'm facing difficulties in nesting a fetch inside another fetch. I'm not sure if this is the correct approach, but my goal is to utilize Vanilla JavaScript to fetch another JSON from the nextPage URL within the JSON list when the "load more" butt ...

javascripthtmljsonfetch-api

Using inline CSS to apply conditional styles to a component in React is a great way to customize the

I'm currently working on customizing the styles of some buttons depending on their 'active' status and whether the user is hovering over them. So far, it's partially working but I'm encountering behavior that I can't fully com ...

javascriptcssreactjsmaterial-ui

Making the height of two divs equal within the same parent element using CSS

Looking for a way to make two adjacent divs, #innerwrapper .sidebar and #innerwrapper > .content, from the same parent container, #innerwrapper, have equal heights due to them being floated left. I initially used jQuery in a separate file to resolve th ...

htmlcssheight

Modify the background color of each word within the search bar

I've been attempting to colorize each word using jQuery and give them a colored background. I came across a solution, but it only seems to work for the HTML content, not the input field in the search bar. Below is an example of what I found: HTML So ...

jqueryhtmlcsssearchhighlight

Is it possible to have one table nested inside another?

Is there a plugin available that allows me to create a table inside another table, linked by an ID and expandable? Something similar to the example shown in this image. Alternatively, is it possible to generate this automatically using a JavaScript functi ...

javajavascriptjqueryhtmlajax

Are HTML attribute names really case-sensitive? A topic filled with conflicting information

After learning that attribute names are case-sensitive, I found conflicting information. A source mentioned that attribute names are indeed case-sensitive. For example, the width attributes in <div> and <DIV> would be considered separate due ...

htmlcss