Moin, brauch mal Hilfe beim CSS (is ja nich so mein Ding =).
Ich habs inzwischen hinbekommen, dass es einigermaßen nach was aussieht
und auf nem Desktop funktioniert.
Das Problem liegt aber bei Small Screens - also Mobile. Dann hängt die Sprechblase rechts über.
Kann man die Sprechblase so definieren, dass sie sich immer an den Screen anpasst?
hier das Bsp:
das Fenster verkleinern. Dann sieht man bei hover, dass die Bubble rechts übersteht
jsfiddle css only tooltip
hier nochmal der komplette Test-code:
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
.tooltips {
position: relative;
display: inline;
}
.tooltips div {
position: absolute;
padding:8px;
max-width:320px;
min-width:180px;
font-family:sans-serif,Arial,Helvetica;
font-style:normal;
font-size:15px;
font-weight:normal;
text-decoration:none;
color:#000000;
background:#FFF6C3;
border:2px solid #FFEE88;
border-radius: 0.3em;
box-shadow: 0.25em 0.25em 0.4em #AAAAAA;
white-space:normal;
text-align: center;
visibility: hidden;
}
.tooltips div:before {
content: '';
position: absolute;
bottom: 100%;
left: 7%;
margin-left: -12px;
width: 0; height: 0;
border-bottom: 12px solid #FFEE88;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
}
.tooltips div:after {
content: '';
position: absolute;
bottom: 100%;
left: 7%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #FFF6C3;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.tooltips:hover div {
visibility: visible;
opacity: 1;
top: 28px;
left: 0%;
margin-left: -4px;
z-index: 999;
}
.icon-help{
background:yellow;
}
</style>
</head>
<body>
<section>
text bsp
<div class="tooltips">
<i class="icon-help">(?)</i>
<div>bsp tooltip text, bsp tooltip text, bsp tooltip text, bsp tooltip text, bsp tooltip text, </div>
</div>
</section>
</body>
</html>
