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

Displaying a message text upon successful AJAX request

I have a web page with an AJAX request that updates data in the database. After the update, I want to display a message to the user on the webpage confirming that the data has been successfully updated. However, currently, no message is being displayed and ...

javascriptphphtmlajax

Why is it that consolidating all my jQuery plugins into one file is ineffective?

Prior to this, I included the following scripts: <script type="text/javascript" src="{{MEDIA_URL}}js/plugins/json2.js"></script> <script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery-msdropdown/js/jquery.dd.js"></script&g ...

javascriptjquerycssdjangotemplates

Video files embedded using Shopify's HTML code may not be visible on iPhones

Hello everyone, I hope you can help me with my issue! I have successfully integrated an HTML video onto my Shopify homepage, but I am experiencing some trouble when trying to view it on an iPhone. Instead of the video playing, I see a blank box. Below is ...

htmlvideoshopify

Issue with scrollspy causing navigation items to not highlight correctly

If you want to track my progress, you can view it here - . Although clicking on the links in the navigation bar scrolls the page to the correct location, the link itself is not being highlighted. To address this, I had to incorporate an offset. var offset ...

jquerycsstwitter-bootstrapscrollspy

RegEx for Filtering Out HTML Entities Without Escaping

Is there a way to prevent the use of unescaped ampersands in a specific input field? I've been struggling to create a RegEx that blocks "&" unless it's followed by "amp;" or just avoid the usage of "& " (with a space). I attempted to mod ...

htmlxmlregexescapingampersand

Building an Array in PHP

When a user submits a form with multiple text inputs that share the same name attribute, how can I handle this in my PHP code? Example HTML: <input type="text" name="interest"/> ...

phphtml

interaction with leaflet popup information

My aim is to access the content within a leaflet popup. Specifically, I have inserted a form with buttons inside it that I would like to interact with. However, for now, I am simply attempting to add an event to the popup itself. $(".leaflet-popup-content ...

jqueryhtmlcssleafletpopup

Retrieve HTML content from a JSON object and render it on a web page

I am facing a challenge with decoding html that is in json format. I'm struggling to figure out how to retrieve my html and display it on a page. It seems like json_decode isn't the solution. Can anyone help me with this issue? Appreciate any as ...

phpjavascriptjqueryhtmljson

Adaptable layout - featuring 2 cards side by side for smaller screens

I am currently designing a webpage that showcases a row of cards, each featuring an image and a title. At the moment, I am utilizing the Bootstrap grid system to display 4 cards per row on larger screens (col-md-2), but my goal is to modify this layout t ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Find the height of the viewport using jQuery, subtracting (n) pixels

Apologies if the topic seems puzzling, I couldn't find a better way to explain it. I utilized jQuery to adjust the height of a div to match the size of the viewport. var slidevh = function() { var bheight = $(window).height(); $(".container" ...

javascriptjqueryhtmlcss

What is the best way to eliminate <p><br></p> tags from a summernote value?

When I try to enter text into the summernote textarea for space, I keep getting this code: <p><br></p><p><br></p><p><strong style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: just ...

htmlangularjssummernote

Transform text that represents a numerical value in any base into an actual number

Looking to convert a base36 string back to a double value. The original double is 0.3128540377812142. When converting it to base 36: (0.3128540377812142).toString(36); The results are : Chrome: 0.b9ginb6s73gd1bfel7npv0wwmi Firefox: 0.b9ginb6s73e Now, h ...

javascriptjqueryajaxhtml

Maintain the aspect ratio of a div with CSS styling

Attempting to create a div while maintaining a 16:9 aspect ratio using CSS led me to conduct a Google search. Fortunately, I stumbled upon a helpful resource on Stack Overflow that detailed how to achieve this: How to maintain the aspect ratio. Excited to ...

htmlcss

Pair objects that possess a specific attribute

I have a HTML snippet that I want to modify by adding the CSS class HideEdit to hide specific columns. <th class="rgHeader" style="text-align: left;" scope="col" _events="[object Object]" control="[object Object]" UniqueName="Edit"> This particular ...

jqueryhtmlcss.nettelerik

Make the HTML element expand to the remaining height of the viewport

Need help with creating a section that automatically fills the remaining viewport height below the navigation bar. The section includes a centered div and background image, along with a button at the bottom for scrolling down by one full viewport height. H ...

cssviewport

css - Tips for reducing the speed of inertia/momentum scrolling on mobile devices

I have been working on creating a scrollable card gallery using a CSS grid layout. The structure I am following is similar to this: <div class="gallery-wrapper"> <div class="gallery-container"> <div id="card-1" class="gallery-ca ...

htmlcssscroll

Custom Native Scrollbar

Currently, there are jQuery plugins available that can transform a system's default scroll bar to resemble the iOS scroll bar. Examples of such plugins include . However, the example code for these plugins typically requires a fixed height in order to ...

javascriptjqueryhtmlcssslimscroll

Utilizing a dynamic URL to set the background image of a div element (with the help of

Currently, I am in the process of designing a user registration page that allows users to input an image URL and view a preview of the image within a designated div. The div already contains a default image set by a specific class. The HTML code for displa ...

jqueryhtmlcssimage

How can we apply CSS to all pages except for one containing the "howto" placeholder?

Hey, we're dealing with multiple pages that require CSS styling. .cms-index-noroute .col-main .std {font-weight: bold} .cms-index-list .col-main .std {font-weight: bold} .cms-index-view .col-main .std {font-weight: bold} We'd prefer to simplify ...

csscss-selectors

What causes the inability to separate the span size from the parent div when enlarging the span width?

Check out this Relevant Fiddle: https://jsfiddle.net/promexj1/1/ I'm working on adjusting the widths of two child spans within a parent div to be slightly smaller than the parent itself (due to starting translation 10px to the right for one of the sp ...

htmlcss