Tooltip not showing only on hover

user_8118685 0
Viewed 907

This is my code,I want to display the tooltip, only when i hover over the anchor tags, Initally I have hidden the visibilty and only want to show on hover. But The tooltip is not getting shown when I am hovering over it and I am not getting any error on console aswell. what I am doing wrong here? Can anyone please help

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>

tooltip css html
3 Answers

This answer is related to the original question

First: I found some issues:

  • The two span texts are swaped.
  • There is no position property defined for any parent of the tooltip. Therefor bottom refers to the body. You could solve this by setting the container div.links to position: relative.
  • You are using the wrong selectors for the tooltips, for example .spanhead1 .tooltiptext. Since they are no children of a.spanhead... it should be only .tooltiptext.

You could use the adjacent sibling selector + for selecting the next sibling of the hovered element, for example:

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

Working example:

I compressed the CSS a bit:

  • I removed the double tooltip definition,
  • merged the single values for margin-top, -left etc. into one shorthand margin and
  • removed the definition for .header because there is none in the example HTML.

Furthermore i used an attribute selector a[class^="spanhead"], which means select every anchor with a class that begins with spanhead. Alternatively you could add an extra class that is only 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>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">
    <a class="spanhead1" href="javascript:void()" onclick=" person_folowup()">Open Door (ODP-)</a>
    <span class="tooltiptext">For opendoor</span>
    <a class="spanhead2" href="xyz.com">Ethics (IMT-)</a>
    <span class="tooltiptext">For ethics</span>
  </div>

</div>

Alternativly you could omit + if you would nest the tooltips inside the anchors. The advantage is that you can set the spanheads itself to position: relative (instead of div.links) so that the tooltips are under its spanhead instead of both at the same position horizontally centered.

Working example:

I added an extra class .spanhead to omit 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>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">
    <a class="spanhead spanhead1" href="javascript:void()" onclick=" person_folowup()">Open Door (ODP-)
      <span class="tooltiptext">For opendoor</span>
    </a>
    <a class="spanhead spanhead2" href="xyz.com">Ethics (IMT-)
      <span class="tooltiptext">For ethics</span>
    </a>
  </div>

</div>

user_153773550

Your tooltips are showing up just at the bottom of the page below i better positioned the tooltip on the left.

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>

user_160315740
user_143056370
Related