Tooltip not appearing when user hovers over it

I need help with displaying tooltips only when hovering over anchor tags. Initially, I have hidden the visibility and want to show it on hover. However, the tooltips are not appearing when I hover over them and there are no console errors displayed. Can someone please assist me?

body {
  font-family: Bogle, Bogle, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div {
  margin: auto;
  width: 80%;
  background-color: #F9F9F9;
  padding: 10px;
  border-radius: 12px;
}

.links {
  display: flex;
  justify-content: center;
}

p {
  text-align: center;
  font-size: 18px;
}

a {
  text-align: center;
}

.spanhead1 {
  margin-right: 15px;
  margin-left: 10px;
  font-size: 14px;
  margin-top: 20px;
  width: 69px;
  word-break: break-all;
}

.spanhead2 {
  margin-right: 15px;
  margin-left: 10px;
  font-size: 14px;
  margin-top: 20px;
  width: 48px;
  word-break: break-all;
}

.heading {
  font-weight: bold;
  font-size: 20px;
}

.spanhead1 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #e1edf9;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
  font-size: 16px;
}

.spanhead1 .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e1edf9 transparent;
}

.spanhead1:hover .tooltiptext {
  visibility: visible;
}

.spanhead2 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #e1edf9;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
  font-size: 16px;
}

.spanhead2 .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e1edf9 transparent;
}

.spanhead2:hover .tooltiptext {
  visibility: visible;
}
<div>

  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <div class="links">
    <span class="spanhead1">
      <a href="javascript:void()" onclick="winperson_folowup()" style="color: rgb(0,113,206);">Open Door (ODP-)</a>
      <span class="tooltiptext">For opendoor</span>
    </span>
    <span class="spanhead2">
      <a href="https://xyz" target="_blank" style="color: rgb(0,113,206);">Ethics (IIMT-)</a>
      <span class="tooltiptext">For Inperson</span>
    </span>
  </div>
</div>

htmlcsstooltip

Answer №1

Your tooltips are currently appearing at the bottom of the page, but it would be more effective to position them on the left side instead.

body {
  font-family: Bogle, Bogle, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div {
  margin: auto;
  width: 80%;
  background-color: #F9F9F9;
  padding: 10px;
  border-radius: 12px;
}

.links {
  display: flex;
  justify-content: center;
}

p {
  text-align: center;
  font-size: 18px;
}

a {
  text-align: center;
}

.spanhead1 {
  margin-right: 15px;
  margin-left: 10px;
  font-size: 14px;
  margin-top: 20px;
  width: 69px;
  word-break: break-all;
}

.spanhead2 {
  margin-right: 15px;
  margin-left: 10px;
  font-size: 14px;
  margin-top: 20px;
  width: 48px;
  word-break: break-all;
}

.heading {
  font-weight: bold;
  font-size: 20px;
}

.spanhead1 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #e1edf9;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 120%;
  left: 45%;
  margin-left: -60px;
  font-size: 16px;
}

.spanhead1 .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e1edf9 transparent;
}

.spanhead1:hover .tooltiptext {
  visibility: visible;
}

.spanhead2 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #e1edf9;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
  font-size: 16px;
}

.spanhead2 .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e1edf9 transparent;
}

.spanhead2:hover .tooltiptext {
  visibility: visible;
}
<div>

  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <div class="links"><span class="spanhead1"><a href="javascript:void()" onclick="winperson_folowup()" style="color: rgb(0,113,206);">Open Door (ODP-)</a>
    <span class="tooltiptext">For opendoor</span>
    </span>
    <span class="spanhead2">
    <a href="https://xyz" target="_blank" style="color: rgb(0,113,206);">Ethics (IIMT-)</a>
    <span class="tooltiptext">For Inperson</span>
    </span>
  </div>
  
</div>

Answer №2

This response is directly relevant to the original query

Firstly: Upon closer inspection, I have identified several issues:

  • The two span texts have been swapped.
  • No position property has been specified for any parent of the tooltip. As a result, bottom refers to the body. This can be rectified by setting the container div.links to position: relative.
  • You are employing incorrect selectors for the tooltips, such as .spanhead1 .tooltiptext. Since they are not descendants of a.spanhead..., it should simply be .tooltiptext.

You can utilize the adjacent sibling selector + to target the next sibling of the hovered element, for instance:

.spanhead1:hover + .tooltiptext {
  visibility: visible;
}

Illustrative example:

I streamlined the CSS slightly:

  • I eliminated the duplicate tooltip definition,
  • consolidated the individual values for margin-top, -left, etc. into one shorthand margin, and
  • omitted the declaration for .header since it is absent in the provided HTML snippet.

In addition, I utilized an attribute selector a[class^="spanhead"], which selects every anchor with a class that starts with spanhead. Alternatively, you could introduce a distinct class specifically for spanhead.

body {
  font-family: Bogle, Bogle, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div {
  width: 80%;
  margin: auto;
  padding: 10px;
  border-radius: 12px;
  background-color: #F9F9F9;
}

.links {
  position: relative;
  display: flex;
  justify-content: center;
}

p {
  text-align: center;
  font-size: 18px;
}

a[class^="spanhead"] {
  width: 69px;
  margin: 20px 15px 0 10px;
  text-align: center;
  font-size: 14px;
  word-break: break-all;
}

.spanhead2 {
  width: 48px;
}

.tooltiptext {
  position: absolute;
  top: 150%;
  left: 50%;
  z-index: 1;
  visibility: hidden;
  width: 120px;
  margin-left: -60px;
  padding: 5px 0;
  border-radius: 6px;
  text-align: center;
  font-size: 16px;
  background-color: #e1edf9;
  color: #000;
}

.tooltiptext::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e1edf9 transparent;
  content: "";
}

a[class^="spanhead"]:hover + .tooltiptext {
  visibility: visible;
}
<div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
  <div class="links">
    <a class="spanhead1" href="javascript:void()" onclick=" person_followup()">Access Portal (AP-)</a>
    <span class="tooltiptext">For accessing portal</span>
    <a class="spanhead2" href="example.com">Code of Ethics (CE-)</a>
    <span class="tooltiptext">Regarding ethical standards</span>
  </div>

</div>

Alternatively, if you place the tooltips inside the anchors, you can avoid using +. This way, you can set the spanheads themselves to position: relative (instead of div.links) so that the tooltips appear beneath their respective spanheads rather than both being horizontally centered at the same position.

Illustrative example:

I introduced an additional class .spanhead to eliminate the need for the attribute selector.

body {
  font-family: Bogle, Bogle, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div {
  width: 80%;
  margin: auto;
  padding: 10px;
  border-radius: 12px;
  background-color: #F9F9F9;
}

.links {
  display: flex;
  justify-content: center;
}

p {
  text-align: center;
  font-size: 18px;
}

.spanhead {
  position: relative;
  width: 69px;
  margin: 20px 15px 0 10px;
  text-align: center;
  font-size: 14px;
  word-break: break-all;
}

.spanhead2 {
  width: 48px;
}

.tooltiptext {
  position: absolute;
  top: 150%;
  left: 50%;
  z-index: 1;
  visibility: hidden;
  width: 120px;
  margin-left: -60px;
  padding: 5px 0;
  border-radius: 6px;
  text-align: center;
  font-size: 16px;
  background-color: #e1edf9;
  color: #000;
}

.tooltiptext::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e1edf9 transparent;
  content: "";
}

.spanhead:hover .tooltiptext {
  visibility: visible;
}
<div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
  <div class="links">
    <a class="spanhead spanhead1" href="javascript:void()" onclick=" person_followup()">Access Portal (AP-)
      <span class="tooltiptext">For accessing portal</span>
    </a>
    <a class="spanhead spanhead2" href="example.com">Code of Ethics (CE-)
      <span class="tooltiptext">Regarding ethical standards</span>
    </a>
  </div>

</div>

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

Creating aesthetically pleasing class names using SASS and CSS modules

I'm in the midst of working on a Next.js project and experimenting with SCSS/SASS for my styling needs. I'm currently grappling with how to streamline the process of applying class names. Here's the issue at hand: Within one of my componen ...

csssassnext.jscss-selectorscss-modules

Utilizing PHP to create an interactive website

As a novice PHP developer, I took to Google in search of tutorials on creating dynamic PHP websites. What I found was that many tutorials used the $_GET variable to manipulate URLs and make them appear like this: example.com/?page=home example.com/?page= ...

phpjavascripthtmlcss

Is there a way to hide my jQuery menu?

Can anyone help me figure out how to make it close when I click on a link? <nav class="navigation"> <a href="" class="menuIcon"><i class="fa fa-bars"></i></a> <ul class="nav"> <li class="clearfix"&g ...

jqueryhtmltwitter-bootstrapdrop-down-menumenu

Send a MySQL query and an HTTP request to an SMS gateway through JavaScript

I have a scenario where data is being received by my confirm.php file. In this file, I have the following code and currently facing an issue with the javascript part. Any help and suggestions would be greatly appreciated. The objective of my javascript is ...

javascriptphpjqueryhtmlmysql

Track how far visitors scroll into the inner content area using Google Tag Manager

Our website features a left-side vertical navigation menu. In order to measure scroll depth, we incorporated Tag Manager code. However, the Tag Manager code triggers on every page load due to us fixing the body scroll and implementing a custom scroll for t ...

htmlgoogle-analyticsgoogle-tag-manager

Using Jquery to swap out div elements and reinitialize code after selecting a menu <a href>link<</a>

I have a jQuery script that swaps out a div when a href="#1" is clicked. The same link, a href="#1", is then replaced by a href="#2" and vice versa. Here is the jQuery code: $('.child2, a[href="#1"]').hide() $('#replacepagelinks a').c ...

javascriptjqueryhtmlmenu

Exploring the process of retrieving outcomes from Node.js within a Knockout ObservableArray

Below is the Node.js code snippet I have: var http = require('http'); var port = process.env.port || 1337; var MovieDB = require('moviedb')('API KEY'); MovieDB.searchMovie({ query: 'Alien' }, function (err, res) { ...

javascripthtmlnode.jsknockout.js

Steps to showcase specific data in the bootstrap multi-select dropdown menu sourced from the database

Utilizing CodeIgniter, I have set up multiple select dropdowns using bootstrap. The issue I am facing is with displaying the selected values in these drop-downs on the edit page. Would appreciate some guidance on how to tackle this problem. Here is a sni ...

phphtmltwitter-bootstrapcodeigniter-3

The appended button remains unresponsive when clicked

After conducting extensive research, I have come across numerous questions on overflow regarding a specific issue, but none of the solutions seem to work. The problem revolves around a button that appears on the page when another element is clicked. The u ...

jqueryhtmlappend

"Unable to get the overflow-x: auto property to function properly

Below is the CSS and HTML code that I am working with: #container { display: table; margin: 0 auto; } .table-container { width: 100%; overflow-x: auto; _overflow: auto; } <div id='container'> <div class='table-contain ...

htmlcss

Tired of the premium content on Medium.com. How can I conceal premium posts that are aimed at a specific class within a parent element?

I have noticed that all Premium posts contain an element with the class ="svgIcon-use" <svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.090 123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 ...

javascriptcss

Guide to pre-populate a text field within a WKWebView on a website with the use of Swift

I am a beginner in the world of coding, specifically with Swift. My goal is to allow users to input their username and password in the settings section, which will then automatically populate the login page on a WKWebView that I have created. Currently, I ...

htmlswiftxcode

Authentication using a singular input

Struggling to design an input for a verification code with just one input instead of four. However, I am facing some challenges: The input is not responding correctly when clicked, it's a bit buggy and requires clicking at the end of the input to typ ...

htmlcss

`Hovering over a div triggers a continuous animation loop`

I've gone through various questions and solutions related to this issue, but unfortunately, none of them seem to work for me. It's possible that I might be overlooking something or my scenario is slightly unique. The main problem I'm facing ...

javascriptjqueryhtmlanimation

Unique symbols within HTML tags

Many times when the topic of HTML attributes is brought up, people are referring to the value of the attribute. However, I am interested in discussing the actual attributes themselves. Would you consider the following code snippet to be valid? <a href= ...

htmlrfc

The selenium element for the submit button is currently not responsive to interactions

Recently, I encountered some challenges with selenium, specifically the anticaptcha API. Although I managed to resolve that issue, I am currently facing a different problem. Below is my existing code: from time import sleep from selenium import webdriver f ...

pythoncssseleniumautomationelement

The jQuery dynamic fields vanish mysteriously after being validated

I am facing an issue with my jQuery and validation. Below is the code snippet causing the problem: var fielddd = 1; $(document).on('click', '.btn.add-field', function() { fielddd++; $('#newfield').append('< ...

javascriptphpjqueryhtml

Avoid Conversion of HTML Entities in Table Cells

<table> <tr> <td>&gt;</td> </tr> <tr> <td>&&#xfeff;GT</td> </tr> </table> In the code snippet above, I have table cells containing HTML entities. A re ...

javascripthtmlangularjs

Angular's ng-model is unable to access the value of an object array

When selecting the days, users should be able to input check-in and check-out time ranges dynamically. However, there seems to be an issue with retrieving the values and data format. The ng model is unable to capture the check-in and check-out values. The ...

htmlangulartypescript

Converting CSS code into JavaScript

I am currently working with the following code: .mr15 > * margin-right: 15px &:last-child margin-right: 0 I need help translating this code to Javascript. Should I use JQuery or pure Javascript for this scenario? Thank you. ...

javascriptjquerycss