Heyho,
undzwar hab ich mir ein Latestbans Plugin geschrieben, was auch funktioniert nur hab ich Probleme mit dem dazugehörigem CSS.
Die Anzeige wurde in die Sidebar integriert:
Wenn man jetzt auf den Namen rüberfährt sollte oben eine kleine Box erscheinen mit z.b. dem Bangrund (eine art Tooltip)
Nur wird die Box beim ersten Namen überhaupt nicht angezeigt, beim zweiten abgeschnitten und erst beim dritten vollständig angezeigt, jedoch nur vollständig in der Höhe aber nicht in der Breite - bei den letzten gleich wie beim dritten
Dazugehörige CSS Abschnitt:
Spoiler anzeigen
CSS
.tooltipBans {
position: relative;
display: inline-block;
text-decoration: none;
//color: #222;
outline: none;
}
.tooltipBans > span {
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
font-size: 0.9em;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltipBans:hover {
border: 0;
}
.tooltipBans:hover > span {
visibility: visible;
}
.tooltipBans > span:before, .tooltipBans > span:after {
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltipBans > span:before {
border-top-color: #ccc;
bottom: -8px;
}Das dazugehörige Template:
Spoiler anzeigen
Code
<dl class="sidebarBoxList">
{foreach from=$latestbans item=latestban}
<li class="box24">
<img src="http://www.wcfan.de/wcf/images/latestbanForbidden.png">
<div class="sidebarBoxHeadline">
<a href="http://bans.wcfan.de/index.php?p=banlist&searchText={$latestban.authid}&Submit=" target="_blank" class="tooltipBans">{$latestban.name}<span>{$latestban.reason}</span></a><small> - {@$latestban.created|time}</small><br />
<small>{$latestban.authid}</small>
</div>
</li>
{/foreach}
</dl>
klar is es nicht auf das Design angepasst, das kommt sowieso mir gehts erstmal um die Tooltip Box.
Ich hoffe ich versteht was ich meine,
vielen Dank schonmal.
Greetz
- Danke aufjedenfall!