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>