In CSS
/************************************************************** * Tooltip beautifier * * according to: https://www.w3schools.com/css/css_tooltip.asp *******/ /* Tooltip container */ .tooltip { position: relative; } /* Tooltip text */ .tooltip .tooltiptext { /* font-size: take the default from global design, to sync the tooltip size with the user's preferences (Ctrl +) (Ctrl -) */ /* width: not set, to let the content of the tooltip decide the size */ background-color: #484848; color: #FFF; text-align: center; border-radius: 5px; border: solid 2px #000; font-family: sans-serif; visibility: hidden; padding: 10px 5px; white-space: nowrap; /* prevent automatic linebreaks. The writer of the tooltip should be responsible of formatting his tooltip. */ opacity: 0; /* Position the tooltip text without any gap, to let the user move the mouse in the tooltip text to click a link there. */ top: -10px; /* -10px because we use a top padding of our tooltip-text of 10px */ position: absolute; z-index: 1; } /* Link in tooltip text */ .tooltip .tooltiptext a { color: #82CAFA; text-decoration: underline; } /* Fade in the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; transition: opacity 1.25s; transition-delay: 0.75s; } /* Tooltip left-arrow */ .tooltip .tooltiptext::after { content: " "; position: absolute; top: 13px; /* position the arrow in the right upper corner of the 'hoverable' element */ right: 100%; /* To the left of the tooltip */ margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; }
dann:
<div class="tooltip">Hover over me <span class="tooltiptext"><a href='http://www.google.de'>Tooltip text</a></span> </div>
In Bootstrap
hierbei ist jedoch das Problem, dass die eingebundene CSS-Datei das default-Design zerschießen kann
<html> <head> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.4%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <a href="#" role="button" class="btn popovers" data-toggle="popover" data-trigger="hover" title="Hallo" data-content="test content <a href='https://www.google.com/' title='test add link'>link on content</a>" data-original-title="test title">test link</a> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%24(%22%5Bdata-toggle%3Dpopover%5D%22).popover(%7Bhtml%3Atrue%2C%20delay%3A%7B%22show%22%3A100%20%2C%20%22hide%22%3A%203000%7D%7D)%3B%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> </body> </html>