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?

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

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

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