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:
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;
}
Alles anzeigen
Das dazugehörige Template:
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>
Alles anzeigen
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