Explanation: The information box does not appear when the mouse hovers over it

Welcome to the gallery showcasing a unique calendar design with tooltip functionality. This calendar features a special hover effect for New Year's Day on January 1st, displaying a tooltip text upon interaction. Feel free to explore the code below to see how this interactive calendar is implemented!

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

htmlcsshovertooltip

Answer №1

To display the tooltip in relation to its containing element, it must be properly positioned so that it appears next to the containing element (.newyear) when hovered over.

This involves setting the position property of the containing element (.newyear) where the absolutely positioned nested element (.tooltiptext) resides. Example:

.newyear {
  position: relative;
}

Demonstration with Code Snippets:

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

/* CSS styles here */


<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>

   /* Table content here */

</table>

In essence, the tooltip is taken out of the normal flow of the document when given an absolute position (e.g: position: absolute) and is then positioned relative to the document.

To have the tooltip placed relative to a parent element, the parent element must be relatively positioned - thus ensuring the tooltip aligns relative to its parent container.

Answer №2

Update the following properties in your 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;
}

The troubleshooting lines have been commented out using "/* */". They are retained for your reference on what might have gone wrong. With these changes, you will be able to see a working tooltip above number "1" for 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 -->

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

Any recommendations besides suggesting "g"? Let's brainstorm some other ideas for g!

Looking for some assistance with a mixin I wrote that seems to be causing a loop. Any suggestions on how to optimize the code or alternative methods to achieve the desired outcome? <div class='mh-60 pt-10'>dfgdfgsdfgsdf</div> ...

cssloopssass

Tracking a user's path while redirecting them through various pages

Recently, I created a website with a login page and a home page using nodejs, javascript, and html. The client side sends the entered username and password to the server, which then replies based on the validation result. During navigation between pages, h ...

javascripthtmlnode.js

The process of organizing and arranging the content that appears on a webpage is in

Seeking a solution to achieve a similar effect like this example. Wanting the sections to transition nicely when clicked on. Should I use a Jquery plugin or implement it with CSS? ...

javascriptjqueryhtmlcss

Tips on how to postpone the loading of an image when utilizing a CSS animation on a different element

I'm currently working on a webpage where I have integrated CSS animations to move images around. When you click on these images, a larger version of the image along with a related paragraph is supposed to appear in its place. Initially, I had set up a ...

javascripthtmlcss

Why is my AngularJS application triggering two events with a single click?

<button id="voterListSearchButton" class="serachButton" ng-click="onSearchButton1Click()">find</button> This button allows users to search for specific information: $scope.onSearchButton1Click = function() { var partId = $("#partIdSearch" ...

javascripthtmlangularjscss

What is the process for including or excluding a class from a horizontal scrollbar?

I've been trying to implement a back to top button on a horizontally scrolling page. However, I'm encountering difficulties in adding or removing the necessary class to show or hide the button. Here's the JavaScript code I'm using: $( ...

javascriptjqueryhtmlcsshorizontal-scrolling

assigning attributes to web addresses

Is there a way to set a style property for webpages by targeting addresses that contain /index.php/projecten/ instead of specifying each complete address in the code? Currently, I am using the following code: <ul class="subnavlist" style="display: &l ...

phpjavascriptcss

CSS: Achieving vertical centering without specifying a fixed height using line-height. Is it possible?

Using line-height to vertically center text within an inline-element is a technique I often employ. Here's a demo I created: body, section { width: 100%; } section { background-color: lightGrey; } #wrap { margin: 30px auto; width: 100%; ...

htmlcss

I am experiencing an issue with using double quotation marks in VS Code

Whenever I press the double quote symbol like this "", the cursor automatically moves to the end. While this may be natural, I would prefer the cursor to move inside the double quotes automatically when pressing them. Additionally, it's a bi ...

javascripthtmlreactjsvisual-studiovisual-studio-code

What are the steps for submitting a form by clicking on text?

Whenever I try to submit a form by clicking on span id="ToolBarDownload", the form id="myformID" doesn't seem to get submitted. Can someone help me figure out what's wrong with my code? Any suggestions are greatly appreciated! Thanks! Also, just ...

jqueryhtml

Proper Alignment of Div Elements

Just starting out with coding and currently practicing display and positioning. I've created a webpage with multiple divs containing the same content, displayed in a vertical scroll order. Now, I'm looking to position these divs side by side in r ...

htmlcss

Switch up image origin when image reaches screen boundary

I am trying to create a DVD screensaver with changing images each time it hits the edge, but I can't seem to get it to work. I've attempted using the code snippet below: var img = document.getElementById("myImage"); img.src = 'img/new-image. ...

javascripthtmlcss

Strip certain tags from HTML without including iframes

Removing specific tags from HTML can be tricky, especially when working with PHP and JavaScript. One approach is to fetch an HTML page in a PHP file using curl and getJSON, storing the result in a .js file. However, this method may encounter issues with mu ...

phpjavascriptjqueryhtmlregex

Issue with activation of onClick event in case/switch statement

Currently working on a JavaScript project to recreate the Fallout terminal game, with one of the main aspects being comparing words selected by the user to those chosen by the computer. The concept of this hacking game is reminiscent of the board game Mas ...

javascripthtmlfunctiondomswitch-statement

Transforming an image by masking it to create a binocular-like view

I've been experimenting with creating a unique visual effect where an image is revealed through a binocular-shaped element that follows the mouse cursor. The circular part of the element moves along with the cursor, unveiling parts of the image as it ...

jquerycsssvgmasking

HTML5 Canvas Border

Hey Everyone, I've been working on an HTML5 canvas project where I set the canvas width to $(window).width(). Everything was going smoothly until I added a border, which caused a horizontal scroll to appear. Important: I attempted to use the innerWid ...

javascriptjqueryhtmlcsscanvas

Choosing from a variety of tr elements

I'm working with a table in HTML that has about 100 rows. I would like to apply different colors to specific groups of rows, such as making rows 1-10 red and rows 20-40 blue. Using nth-child seems like an option, but it can get quite verbose if I nee ...

javascriptjqueryhtmlcss

Ensuring consistent width for two divs using CSS

https://i.stack.imgur.com/3n8La.png I am currently working on creating a responsive CSS layout for two div elements. The first div will contain the summary, while the second div will hold the detailed description. My challenge is to make sure that the seco ...

css

Troubleshooting scope evaluation in AngularJS within style tags on IE9 not functioning

My issue involves a div block with a style attribute that includes left:{{left}}px; and right:{{right}}px. Even though $scope.left and $scope.right are being updated, my item still doesn't move as expected. I have created a fiddle to demonstrate th ...

cssangularjsinternet-explorer-9

Creating a dynamic linear gradient background color using Angular 2 binding

Using static values works perfectly <div style="background: linear-gradient(to right, #0000FF 0%, #0000FF 50%, #FFA500 50%, #FFA500 100%);"></div> in my TypeScript file. this.blueColor = '#0000FF'; this.orangColor = '#FFA500&a ...

htmlcssangular