Tooltip in recent posts

by **APE** on March 1st 2016, 8:19 pm

Tooltip in recent posts

Change the style of your last topic looks to fit in with the new tagging system popup
Right now when you hover over the short text on the last post box you get a default browser popup

This tutorial will help you make that change.

You will need to make sure the following settings are turned on before making this change.

ACP General Tab Tooltip in recent posts Boite_email

Messages and e-mails Configuration

enable the preview for username tags like in the screen shot.
Tooltip in recent posts Captur16

The tooltipster plugin for jQuery isn't available when this option is disabled.

The javascript code

ACP Modules Tab Tooltip in recent posts Arrow111

HTML & JAVASCRIPT Tooltip in recent posts Arrow111

JavaScript codes management Tooltip in recent posts Arrow111

create a new js code Tooltip in recent posts 29877

Title: your choice
Where: on all pages

Code:
$(document).ready(function(){ $('.my-tooltip').tooltipster(); });

Editing templates

ACP Display tab templates General index_box

Find:

Code::  <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />

Replace with:

Code::  <a href="{catrow.forumrow.U_LATEST_TOPIC}" class="my-tooltip" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />

And we save the changes Tooltip in recent posts 29877

Don't forget to publish Wink

Documentation

If you wish to extend this facility to other parts of your forum you have to do is add some html attributes:

class = "my-tooltip"
add this attribute to an html code (for example, to link) to activate this feature
title = "content of the tooltip"
this attribute will be the textual content of the tooltip when you fly over the element with the class my-tooltip