Tooltipp mit Link (in Bootstrap)

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="&lt;script&gt;" title="&lt;script&gt;" />
    <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="&lt;script&gt;" title="&lt;script&gt;" />
    <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="&lt;script&gt;" title="&lt;script&gt;" />
  </body>
</html>

Veröffentlicht von

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.