Hiệu ứng tooltip cho vbb4

[AdminAdmin is verified member.]

Thấy các bạn thích sử dụng cái hiệu ứng rê chuột vào title của box nó nhày ra tooltip (chả biết diễn tả sao nữa ). Nên hôm nay làm cái này chơi nhé, không sử dụng JS nên khỏi lo đụng với mấy mod khác...

Bước 1: tìm temp additional.css add đoạn này vào:

.forumtitle a small{
    background:rgba(0,0,0,0.7);
    text-align:center;
    width:autp;
    padding:5px;
    border-left:1px solid #111;
    border-top:1px solid #111;
    border-right:1px solid #333;
    border-bottom:1px solid #333;
    display:none;
    color:#fff;
    font-size:0.8em;
    text-indent:0
}

.forumtitle a:hover small{
    display:block;
    position:absolute;
    top:0px;
    /*left:50%;*/
    margin:-20px;
    z-index:9999;
    -moz-animation:mymove .25s linear;
    -webkit-animation:mymove .25s linear
}

@-moz-keyframes mymove{
    0%{-moz-transform:scale(0,0);opacity:0}
    50%{-moz-transform:scale(1.2,1.2);opacity:0.3}
    75%{-moz-transform:scale(0.9,0.9);opacity:0.7}
    100%{-moz-transform:scale(1,1);opacity:1}
}

@-webkit-keyframes mymove{
    0%{-webkit-transform:scale(0,0);opacity:0}
    50%{-webkit-transform:scale(1.2,1.2);opacity:0.3}
    75%{-webkit-transform:scale(0.9,0.9);opacity:0.7}
    100%{-webkit-transform:scale(1,1);opacity:1}
}

Bước 2 (có hai cách):

Cách 1: Ví dụ khi bạn tạo box bạn gõ phần Description lên dòng title luôn và đặt nó trong thẻ <small>Nội dung ở đây</small>
Xem hình

Cách 2: tìm temp forumhome_forumbit_level2_post thay toàn bộ bằng code sau (ở đây các mình làm trên tem mặc định). Các bạn chú ý phần mình bôi đỏ nhé, và edit css phía trên sao cho hợp với style của các bạn.

<li id="forum{vb:raw forum.forumid}" class="forumbit_post {vb:raw forum.statusicon} L2">
    <div class="forumrow table">
        <div class="foruminfo td">
            <img src="{vb:stylevar imgdir_statusicon}/{vb:raw forum.imageprefix}forum_{vb:raw forum.statusicon}-48.png" class="forumicon" id="forum_statusicon_{vb:raw forum.forumid}" alt="" />
            <div class="forumdata">
                <div class="datacontainer">
                    <div class="titleline">
                        <h2 class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}[B][COLOR=#FF0000]<vb:if condition="$show['forumdescription']"><small>{vb:raw forum.description}</small></vb:if>[/COLOR][/B]</a></h2>
                        <vb:if condition="$show['browsers']"><span class="viewing">({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
                    </div>
                    

                    <vb:if condition="$vboptions['showmoderatorcolumn'] AND $forum['moderators']">
                        <div class="moderators">
                            <h4>{vb:rawphrase moderators}:</h4>
                            <ol class="commalist">
                                <vb:each from="forum.moderators" value="row">
                                    <li><a class="username" href="{vb:link member, {vb:raw row}}">{vb:raw row.musername}</a>{vb:raw row.comma}</li>
                                </vb:each>
                            </ol>
                        </div>
                    </vb:if>

                    <vb:if condition="$show['subforums']">
                        {vb:raw forum.subforums}
                    </vb:if>
                </div>
            </div>
        </div>
        <vb:if condition="$forum['statusicon'] != 'link'">
        <h4 class="nocss_label">{vb:rawphrase forum_actions}:</h4>
            <vb:if condition="$show['externalrss'] OR $show['member']">
        <ul class="forumactionlinks td">
            <vb:if condition="$forum['allowposting']"><vb:if condition="$show['externalrss']"><li class="forumactionlink rsslink"><a href="external.php?{vb:raw session.sessionurl}type=RSS2&amp;forumids={vb:raw forum.forumid}" title="{vb:rawphrase view_forum_rss_feed}">{vb:rawphrase view_forum_rss_feed}</a></li></vb:if>
            <vb:if condition="$show['member']"><vb:if condition="$show['forumsubscription']"><li class="forumactionlink unsubslink"> <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}subscription.php?{vb:raw session.sessionurl}do=removesubscription&amp;f={vb:raw forum.forumid}" title="{vb:rawphrase unsubscribe_from_this_forum}">{vb:rawphrase unsubscribe_from_this_forum}</a></li><vb:else /><li class="forumactionlink subslink"> <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}subscription.php?{vb:raw session.sessionurl}do=addsubscription&amp;f={vb:raw forum.forumid}" title="{vb:rawphrase subscribe_to_this_forum}">{vb:rawphrase subscribe_to_this_forum}</a></li></vb:if></vb:if></vb:if>
        </ul>
        <vb:else />
        <div class="forumactionlinks"></div>
        </vb:if>
        <h4 class="nocss_label">{vb:rawphrase forum_statistics}:</h4>
        <ul class="forumstats td">
            <li>{vb:rawphrase threads}: {vb:raw forum.threadcount}</li>
            <li>{vb:rawphrase posts}: {vb:raw forum.replycount}</li>
        </ul>
        <div class="forumlastpost td">
            <h4 class="lastpostlabel">{vb:rawphrase last_post}:</h4>
            <div>
                {vb:raw forum.lastpostinfo}
            </div>
        </div>
        </vb:if>
    </div>
    <vb:if condition="$childforumbits">
        <ul class="childsubforum">
            {vb:raw childforumbits}

        </ul>
    </vb:if>
</li>

Bước 3: Còn không click thank

nguồn: vbb4vn

 

[KhanhIT]

Tooltip là cái gi a

 

[dragon80]

Là cái hiển thị trc 1 đoạn nội dung của bài viết, thông tin topic....

Cái nì cũng ko quan trọng. Trên top thống kê của Chang có sẵn rùi.