Dikkat: Bu tutorial default temada sorunsuz bir şekilde çalışmaktadır. Default tema haricindeki temalarda çalışmayabilir ya da sorunlu çalışabilir, bilginize.

extra.css şablonunu açın ve ekleyin:

.messageUserBlock .extraUserInfo
{
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}
 
.messageUserInfo:hover .extraUserInfo
{
    opacity: 1;
    max-height: 300px;
}
 
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
    html .messageUserBlock .extraUserInfo
    {
        opacity: 1;
        height: auto;
        transition: none;
    }
    .messageUserInfo:hover .extraUserInfo
    {
        height: auto;
    }
}
</xen:if>

Demo: