My CSS Tooltip is contained by the Div it's Inside Of

[SkylarDNM]

I am trying to use the standard W3School tool tip CSS on my page but the tool tip is inside of a dropdown and gets contained by the dimensions of the dropdown. I tried messing around with the display settings to make it "block" but that doesn't seem to be helping. Can anyone help me out? 

The problem can be seen here in the Ingredient Quality > Factors Evaluated dropdown > at the end of the first bullet: https://dogfoodreviews.wpengine.com/freedom-adult-beef-recipe/

Also, screenshot attached

Here is the CSS so far:

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 100;
  top: 125%;
  left: 50%;
  margin-left: -60px;
	display: block;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

 

[dsonesuk]

The .panel parent container is using overflow: hidden; its doing what it says on the tin 'hiding" any overflow that occurs

.panel {
  padding: 10px;
  background-color: white;
  border: 1px solid rgb(246, 246, 246);
  border-radius: 0px 0px 10px 10px;
  box-shadow: rgba(152, 152, 152, 0.5) 0px 0px 5px;
  max-height: 0px;
  overflow: hidden; /* HERE*/
  transition: max-height 0.4s ease-out 0s;
}
.panel {
  padding: 5px;
  background-color: white;
  display: none;
  overflow: hidden;/* HERE*/
}

 

Edited March 1, 2022 by dsonesuk

[SkylarDNM]

Appreciate the response. I tried removing that but didn't seem to help.

Thanks for trying.

[SkylarDNM]

Nevermind, I missed one. I took that out and it does work now. Thanks!

[SkylarDNM]

On mobile, this just shows the whole box without requiring a hover/click. Is this an error or just how this function works?

Anybody know of a solution?

[dsonesuk]

You'll find usually a input like checkbox is used, the checkbox is made to be the same size of the area that will be clicked then made invisible using opacity.

This method is also used for mobile menus. I should check mobile menu with dropdown tutorial as idea on how this works.