Search the Community
Showing results for tags 'tool tip'.
Found 2 results
-
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; }
-
Hey, When i test this on W3Schoold it seems to work but it isn't working for me in any browser. What i'm trying to do is have a description block pop up when you hover over a link. I've only put in the code for the first link to test it. But it doesn't seem to work for me. Any help? <!DOCTYPE html> <html> <head> <style> a:link {color:blue; background-color:transparent; text-decoration:none} a:visited {color:cyan; background-color:transparent; text-decoration:none} a:hover {color:darkblue; background-color:transparent; text-decoration:underline} a:active {color:yellow; background-color:transparent; text-decoration:underline} h1 { color: blue; font-family: verdana; } .definition em { font-weight: bold; font-style: normal; } p { font-family: verdana; } li { font-family: verdana; } div.tooltip { background-color: yellow; padding: 20px; display: none; } a.appmetadatasync:hover + div{ display: block; } </style> <!-- <link rel="stylesheet" type="text/css" href="theme.css"> --> </head> <body> <H1>Help Index</h1> <ul> <li><a class="appmetadatasync" href="./appmetadatasync/index.htm" target="_blank">App MetaData Sync Utility - Help</a></li> <div class="tooltip"> <p class="definition"><em>App Metadata Sync</em> is a utility that system administrators and developers can use to synchronize metadata from new sources with the metadata that already exists in the system. This new metadata comes from two primary sources:</p> <ul> <li>Application updates or upgrades</li> <li>Add-on (third-party) products</li> </ul> <p>This metadata is of two types:</p> <ul> <li>Metadata associated with IDO collections and related objects such as tables, properties, and methods. This type of metadata also includes property class and custom assembly metadata.</li> <li>Metadata associated with the application event system. For more information about the application event system and its metadata, see the topic Events Overviews and Processes in the online help for your Mongoose application.</li> </ul> <p>Only metadata associated with an Access As identifier is processed using this utility. For more information about the Access As identifier, see the topic for the Access As Field in the online help for your Mongoose application. </p> </div> <li><a id="appmetadatatransport" href="./appmetadatatransport/index.htm" target="_blank">App MetaData Data Transport - Help</a></li> <li><a id="configmanager" href="./configmanager/index.htm" target="_blank">Config Manager - Help</a></li> <li><a id="formcontrol" href="./formcontrol/index.html" target="_blank">Form Control</a></li> <li><a id="formsync" href="./formsync/index.htm" target="_blank">Form Sync</a></li> <li><a id="idoruntimedevserver" href="./idoruntimedevserver/index.htm" target="_blank">IDO Run Time Dev Server</a></li> <li><a id="replicationtool" href="./replicationtool/index.htm" target="_blank">Replication Tool</a></li> <li><a id="serviceconfigmgr" href="./serviceconfigmgr/index.htm" target="_blank">Service Config Manager</a></li> </ul> </body> </html>
