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

Display additional javascript code for expanding a marquee

Currently, I am working on a stock ticker project using JavaScript. It's progressing well, and now I am focusing on adding a "show more" button to style the ticker. The button should be placed outside of the marquee. When clicked, it will expand the m ...

javascripthtmlcss

JavaScript for creating dropdown menus using Twitter Bootstrap

I've been struggling to get the dropdown menus in my Twitter Bootstrap project to function properly. Below is the code I have for the navbar: <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> < ...

javascripthtmltwitter-bootstrapdrop-down-menu

The overflow scroll feature is activated, causing the background to appear greyed out, yet the

I've been struggling for hours to achieve this layout: Check out the code example here html, body { height: 100%; overflow-y: hidden; overflow-x: hidden; margin: 0px; padding: 0px; } .MyNavbar { height: 30px; background-color: red; } ...

htmlcss

Utilizing CSS to position elements on a webpage

Currently, I am immersed in a CSS and HTML project aimed at honing my skills. The main challenge I face involves positioning a Google Maps image to the right of a paragraph. Despite several attempts, I have been unable to achieve the desired layout. Can an ...

htmlcss

Extracting values from an *ngFor loop in Angular 8 - Here's how to do

Currently, I am utilizing *ngFor to display some data. I have a requirement to extract a specific value from *ngFor and display it in, for instance, my heading. However, when I attempted to use {{ project }}, it consistently returned undefined. Despite hav ...

htmlangulartypescript

Struggling to perfectly align text in the middle of a div container that also has

Seeking help with aligning text vertically within a div that also contains an image. Previous attempts with CSS properties like vertical-align: center; and line-height:90px have proven ineffective. Removing the image allows for the successful use of line- ...

htmlcsscentering

Can I receive a PHP echo/response in Ajax without using the post method in Ajax?

Is it feasible to use Ajax for posting a form containing text and images through an HTML form, and receiving the response back via Ajax? Steps 1.) Include the form in HTML with a submit button. 2.) Submit the form to PHP, where it will process and upload ...

javascripthtmlajax

Ways to align a Unordered List (ul) in the middle

I have a list of items with some elements floated to the left. Currently, it looks like this: | A | B | C | D | E < empty space> | I would like it to appear as: | A | B | C | D | E | Centered on the page with centered contents as well. HTML < ...

htmlcss

Placeholder disappears when text color is changed

I have been struggling for 3 hours trying to change the placeholder color to graytext, but it's just not working. Here is the code I've been using: <div class="form-group"> <label for="email">Email:</label ...

htmlcssbootstrap-4

Creating Spinning Text Effects in Internet Explorer with CSS

Inside a list item (<li>), I have some text that I want to rotate 270 degrees. Direct methods in FireFox, Safari, Chrome, and Opera work fine for this, but when it comes to IE, there is no direct support. I've tried using filters like matrix and ...

cssinternet-explorer

Angular JS allows for the display of text from a textarea upon clicking the submit button

Q] How can I display a single text message from a textarea upon clicking the submit button in angular-js? Here is the current code that I have: <html ng-app="myApp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1 ...

javascriptjqueryhtmlangularjs

Setting fixed width for table headers in Bootstrap 3

Can someone explain why the width of "th" is not fixed and new line breaks occur when the content is too big? Currently, the "th" width expands. How can this be fixed? The width of my first column is col-lg-2. Click here for an example image ...

htmlcsstwitter-bootstrap-3html-table

Creating a custom Chrome extension with CSS embedded within an iframe

Recently, I developed a Chrome app that includes an iframe element within it. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="v ...

cssgoogle-chrome-app

Utilize jQuery to create a login form within a div when triggered by clicking on

I have implemented a jQuery script for login functionality that displays a new div in the center of the page while fading out the rest of the content. It is functioning correctly when I use an anchor tag with the class='login-window' and select i ...

jqueryhtmlcssajax

How to position text to the left, center, or right with CSS, HTML, using span, text align, and inline-block styling

I have 4 boxes. In one of the boxes, I have placed 3 smaller boxes and I want to align them to the left, center, and right while still keeping them on the same line. I've attempted using inline-block, but it doesn't seem to be working properly. C ...

htmlcss

PHP unable to retrieve ID from URL

Is there a way to extract an id from the URL when clicking a button for the purpose of deleting an item from a session? I have tried using $_GET but it doesn't seem to work. <form action="Shop.php?id= <?php echo $values["ProductCode"]; ?>" m ...

phphtml

Embracing right-to-left (RTL) languages

I am looking to create a website that can support both left-to-right (LTR) and right-to-left (RTL) languages seamlessly. My goal is to have the text direction switch automatically to RTL if the content is in an RTL language. Additionally, I want the input ...

javascripthtmlcssright-to-left

Are there any available tools for automatically creating CSS classes based on your HTML code?

Out of pure curiosity, I am wondering if there is a program or script that can automatically generate a style sheet (with empty values) based on the structure of your HTML document. Essentially, it would extract the IDs and classes you have set in your H ...

csshtml

Ways to update HTML content generated by Ajax

Having some difficulties modifying the HTML content generated by AJAX. This is the code snippet from the page: @model IEnumerable<WE_SRW_PeerNissen.Models.Reservations> @{ ViewBag.Title = "List"; Layout = "~/Views/Shared/_Layout.cshtml"; } ...

javascriptjqueryhtmlajax

Trouble with PHP file uploads

Greetings! I am a developer coming from an ASP.NET background, new to PHP. Recently, I transitioned to PHP as I needed to create a website for a friend. However, I encountered a persistent error message while trying to upload music files to a specific fold ...

htmlphp