Show Forum Description Inside Tooltips

[sopremo]

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.

[Justin™]

You do realize that IPB already has tooltips and they can be added just about anywhere. For example, if you want your descriptions to be in a tooltip change this:

<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>

to this:

<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'] ) )"}' data-tooltip="{$forum_data['description']}">{$forum_data['name']}</a></h4>													<p class='desc hide'>{$forum_data['description']}</p>

[Lahori_Munda]

its not working, i done everything fine.

[Guest v1sh]

NOT WORKKKKKKKK!!!

[Guest amir_christ]

thanks for your nice tut. but doesn't work for me.

[f3rryp3ll0]

yes, it not work for me

[Guest hellthew]

Yep latest ipb those code wont work anymore

[Colecionador]

 

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.

 

 

Dont Work

[Yuu]

For those of you who are saying that it isn't working for you, try this tutorial: