Black Tooltip CSS only
How Tooltip for Text works?
- You must add a tooltip class to the Text.
2. You must add a span tag to the Text. Add a Tooltip to the span.
<div class="tooltip">User: <span class="tooltiptext">Registered Users</span></div>
3. Add this code to the styles of your page.
/* Text Styles */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* If you want dots under the text on mouse over */ } /* Tooltip Styles */ .tooltip .tooltiptext { visibility: hidden; width: 200px; top: 100%; left: 50%; margin-left: -10px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; } /* Show tooltip text when hovering over tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; }
Sample code.
<STYLE> /* Text Styles */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* If you want dots under the text on mouse over */ } /* Tooltip Styles */ .tooltip .tooltiptext { visibility: hidden; width: 200px; top: 100%; left: 50%; margin-left: -10px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; } /* Show tooltip text when hovering over tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; } </STYLE> <P><div class="tooltip">User: <span class="tooltiptext">Registered Users</span></div></P> <P><div class="tooltip">Pages: <span class="tooltiptext">Pages viewed</span></div></P> <P><div class="tooltip">Likes: <span class="tooltiptext">Likes delivered</span></div></P>
Categories: