CODEWITHSUNDEEP
htmlcsshovertooltip
ნიკა ხაჩიძე
ნიკა ხაჩიძე

Reputation: 59

Tooltip text doesn't show on hovering

Here is a simple gallery and I want to show a tooltip text on days hover. In that case I want to show newyear text on 1. January hover. I took tooltip code from w3schools. Do I have a logical error or syntactical?

table {
  border-collapse: collapse;
  border-spacing: 0;
}

thead {
  width: 300px !important;
}

td {
  padding: 0;
}

.container {
  font: 87.5%/1.5em 'Lato', sans-serif;
  left: 50%;
  background: #ccc;
  position: fixed;
  top: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
}

.calendar-container {
  position: relative;
}

.calendar-container header {
  border-radius: 1em 1em 0 0;
  background: #e66b6b;
  color: #fff;
  text-align: center;
  width: 402px;
}

.newyear .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}

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

.newyear:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.month {
  font-size: 3em;
  line-height: 1em;
  width: 300px;
  text-align: center;
  padding-bottom: 10px;
}

.calendar {
  background: #fff;
  border-radius: 0 0 1em 1em;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  color: #555;
  display: inline-block;
  padding: 2px;
}

.calendar thead {
  color: #e66b6b;
  font-weight: 700;
  text-transform: uppercase;
}

.calendar td {
  padding: .5em 1em;
  text-align: center;
}

.calendar tbody td:hover {
  background: #cacaca;
}

.current-day {
  color: #e66b6b;
  background: #cacaca;
  font-weight: bolder;
}

.prev-month,
.next-month {
  color: #cacaca;
}
<div class="container">

  <div class="calendar-container">

    <header>


      <div class="month">Januar</div>

    </header>

    <table class="calendar">

      <thead>

        <tr>

          <td>Mon</td>
          <td>Tue</td>
          <td>Wed</td>
          <td>Thu</td>
          <td>Fri</td>
          <td>Sat</td>
          <td>Sun</td>

        </tr>

      </thead>

      <tbody>

        <tr>
          <td class="prev-month">29</td>
          <td class="prev-month">30</td>
          <td class="prev-month">31</td>
          <td class="newyear">1<span class="tooltiptext">Tooltip text</span> </td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>

        <tr>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>11</td>
        </tr>

        <tr>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td class="current-day">18</td>
        </tr>

        <tr>
          <td>19</td>
          <td>20</td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
          <td>25</td>
        </tr>

        <tr>
          <td>26</td>
          <td>27</td>
          <td>28</td>
          <td>29</td>
          <td>30</td>
          <td>31</td>
          <td class="next-month">1</td>
        </tr>

      </tbody>

    </table>



  </div>
  <!-- end calendar-container -->

</div>
<!-- end container -->

View on Codepen

Upvotes: 0

Views: 159

Answers (2)

Eztronics
Eztronics

Reputation: 518

Just change these properties on your this class:

.newyear .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  /*z-index: 1;*/
  /*bottom: 125%;*/
  left: 50%;
  /* margin-left: -60px; */ 
  top:20%; /* New line */
  opacity: 0;
  transition: opacity 1s;
}

I did commented "/* */" the troubleshooting lines. I didn't erase any of them that way you can see what you were doing wrong. Here you can see your working tooltip above number "1" of the new year:

table {
  border-collapse: collapse;
  border-spacing: 0;
}

thead {
  width: 300px !important;
}

td {
  padding: 0;
}

.container {
  font: 87.5%/1.5em 'Lato', sans-serif;
  left: 50%;
  background: #ccc;
  position: fixed;
  top: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
}

.calendar-container {
  position: relative;
}

.calendar-container header {
  border-radius: 1em 1em 0 0;
  background: #e66b6b;
  color: #fff;
  text-align: center;
  width: 402px;
}

.newyear .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  /*z-index: 1;*/
  /*bottom: 125%;*/
  left: 50%;
  /* margin-left: -60px; */ 
  top:20%; /* New line */
  opacity: 0;
  transition: opacity 1s;
}

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

.newyear:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.month {
  font-size: 3em;
  line-height: 1em;
  width: 300px;
  text-align: center;
  padding-bottom: 10px;
}

.calendar {
  background: #fff;
  border-radius: 0 0 1em 1em;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  color: #555;
  display: inline-block;
  padding: 2px;
}

.calendar thead {
  color: #e66b6b;
  font-weight: 700;
  text-transform: uppercase;
}

.calendar td {
  padding: .5em 1em;
  text-align: center;
}

.calendar tbody td:hover {
  background: #cacaca;
}

.current-day {
  color: #e66b6b;
  background: #cacaca;
  font-weight: bolder;
}

.prev-month,
.next-month {
  color: #cacaca;
}
<div class="container">

  <div class="calendar-container">

    <header>


      <div class="month">Januar</div>

    </header>

    <table class="calendar">

      <thead>

        <tr>

          <td>Mon</td>
          <td>Tue</td>
          <td>Wed</td>
          <td>Thu</td>
          <td>Fri</td>
          <td>Sat</td>
          <td>Sun</td>

        </tr>

      </thead>

      <tbody>

        <tr>
          <td class="prev-month">29</td>
          <td class="prev-month">30</td>
          <td class="prev-month">31</td>
          <td class="newyear">1<span class="tooltiptext">Happy New Year!</span> </td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>

        <tr>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>11</td>
        </tr>

        <tr>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td class="current-day">18</td>
        </tr>

        <tr>
          <td>19</td>
          <td>20</td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
          <td>25</td>
        </tr>

        <tr>
          <td>26</td>
          <td>27</td>
          <td>28</td>
          <td>29</td>
          <td>30</td>
          <td>31</td>
          <td class="next-month">1</td>
        </tr>

      </tbody>

    </table>



  </div>
  <!-- end calendar-container -->

</div>
<!-- end container -->

Upvotes: 0

UncaughtTypeError
UncaughtTypeError

Reputation: 8712

The containing element, of the tooltip, needs to be positioned, so that the tooltip appears "relatively" from the containing element (.newyear) when hovering over it.

This can be done by declaring the position property to the containing element (.newyear) of the absolutely positioned nested element (.tooltiptext) e.g:

.newyear {
  position: relative;
}

Code Snippet Demonstration:

table {
  border-collapse: collapse;
  border-spacing: 0;
}

thead {
  width: 300px !important;
}

td {
  padding: 0;
}

.container {
  font: 87.5%/1.5em 'Lato', sans-serif;
  left: 50%;
  background: #ccc;
  position: fixed;
  top: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
}

.calendar-container {
  position: relative;
}

.calendar-container header {
  border-radius: 1em 1em 0 0;
  background: #e66b6b;
  color: #fff;
  text-align: center;
  width: 402px;
}

.newyear .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}

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

.newyear:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.newyear {
  position: relative;
}

.month {
  font-size: 3em;
  line-height: 1em;
  width: 300px;
  text-align: center;
  padding-bottom: 10px;
}

.calendar {
  background: #fff;
  border-radius: 0 0 1em 1em;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  color: #555;
  display: inline-block;
  padding: 2px;
}

.calendar thead {
  color: #e66b6b;
  font-weight: 700;
  text-transform: uppercase;
}

.calendar td {
  padding: .5em 1em;
  text-align: center;
}

.calendar tbody td:hover {
  background: #cacaca;
}

.current-day {
  color: #e66b6b;
  background: #cacaca;
  font-weight: bolder;
}

.prev-month,
.next-month {
  color: #cacaca;
}
<table class="calendar">

  <thead>

    <tr>

      <td>Mon</td>
      <td>Tue</td>
      <td>Wed</td>
      <td>Thu</td>
      <td>Fri</td>
      <td>Sat</td>
      <td>Sun</td>

    </tr>

  </thead>

  <tbody>

    <tr>
      <td class="prev-month">29</td>
      <td class="prev-month">30</td>
      <td class="prev-month">31</td>
      <td class="newyear">1<span class="tooltiptext">Tooltip text</span> </td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>

    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
    </tr>

    <tr>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td class="current-day">18</td>
    </tr>

    <tr>
      <td>19</td>
      <td>20</td>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td>25</td>
    </tr>

    <tr>
      <td>26</td>
      <td>27</td>
      <td>28</td>
      <td>29</td>
      <td>30</td>
      <td>31</td>
      <td class="next-month">1</td>
    </tr>

  </tbody>

</table>

In Summary:

The tooltip is taken out of the normal document flow when positioned absolute (e.g: position: absolute) and positioned relative to the document.

To place it relative to a parent (containing) element, that parent element must be positioned relative - the tooltip is now positioned relative to the parent element.

Upvotes: 1

Related Questions