Show Forum Description Inside Tooltips On IP. Board

Show Forum Description Inside Tooltips On IP. Board. To beautify and make your website or forum to be elegant you can implement tooltips that I will give below. Please follow my tutorial at below!

Tutorial :

1. Go to: 

• ACP
• Look & Feel 
• Manage Skin Sets & Templates 
• Manage Templates in -Your Skin 
• Board Index  
• boardIndexTemplate

2. Find:

<h4><a href="{parse url="showforum={$forum_data['id']}" seotitle="{$forum_data['name_seo']}" template="showforum" base="public"}" title='{parse expression="IPSText::striptags( IPSText::htmlspecialchars( $forum_data['name'] ) )"}'>{$forum_data['name']}</a></h4>
                                                    <p class='desc'>{$forum_data['description']}</p>
 

3. Replace With:

<h4><a href="{parse url="showforum={$forum_data['id']}" seotitle="{$forum_data['name_seo']}" template="showforum" base="public"}" class="tooltipforum" title="{$forum_data['description']}"><span title='{parse expression="IPSText::striptags( IPSText::htmlspecialchars( $forum_data['name'] ) )"}'>{$forum_data['name']}</span></a><span class='ipsBadge ipsBadge_purple' style='vertical-align: top; margin-left: 5px;'>Redirect</span></h4>
 

4. Go to:

• ACP
• Look & Feel 
• Manage Skin Sets & Templates
• Manage Templates in 
• Your Skin
• ipb_styles.css

5. Add: (Anywhere, but suggested at the bottom)

.tooltipforum{
display: inline;
position: relative;
}

.tooltipforum:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 400px;
font-size:12px;
}

.tooltipforum:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
 

Default preview:

After tutorial:

 Hope This tutorial helped you.

It is Show Forum Description Inside Tooltips On IP. Board, Good Luck!

Title: Show Forum Description Inside Tooltips On IP. Board
Posted by:Stuard Van
Published :2013-09-21T10:00:00-07:00
Rating: 5
Reviewer: 5 Reviews
Show Forum Description Inside Tooltips On IP. Board

Share :

Related articles:

IP.Board Tutorials

• How to Remove "License Key Missing" Warning in ACP New Tutorial 2015
• [ Tutorial ] How to change the default mobile skin in 3.4.x
• How to Easily Smooth Board Width Changer On IP. Board
• How to Easily Disable Fast Reply On IP. Board
• [Tutorial] Creating Some Pretty BBcode On IP. Board
• Forum Hover Colour On IP. Board
• How to Easily Arrange Subforum In 3 Columns On IP. Board
• How to Make Horizontal Userinfopane On IP.Board
• How to Easily Make-Block Ad | Advertising Space On IP. Board
• Add Twitter, Facebook Icons On Header IP. Board
• Protect Nulled IP Board from IPS
• Add Charm Bar On IP Board
• How To Easily Edit The Copyright Text For IP On Board
• IPB 3.4.x Missing Editor Box On IP Board
• [App] Tutorials On IP. Board
• How to Easily Smooth Scroll To Top Button On IP. Board
• How To Easily Edit Shoutbox Ajax Refresh Settings On IP Board
• Group Format (Hook) Fix for 3.4.x On IP Board
• [Lesson] Registration arrangement On IP. Board
• How To Easily Show Files Images On IP.Board Download
• How To Auto Add Links Into Code Tags On IP.Board
• How To Make Simple Validating Message On IP. Board
• How to Easily Install A Skin On IP. Board
• Clickable Custom Profile Fields On IP.Board