Topic preview directly from the forums (with Tooltip)

#1 - Posted Sun Jan 30, 2022 12:11 am

Niko

Forum Administrator

Team contributor
You have been part of the community team

Community veteran
You belong to this community since its ancient time

Active Contributor
The user has wrote more than 100 posts and comments

Passioned user
You have participated in 50+ different topics, a true fan!

Post lover
You have liked more than 50 posts!

Beta Tester
You have been part of the Beta-Testing team

Forumotion expert
This user is an expert with Forumotion free forum hosting

10th Anniversary (Grand Re-open)
Thanks for being part of our grand re-opening

Merry Christmas 2022
Thanks for having been with us during Christmas season!

Forum Writer
You have opened more than 20 topics on the forum

The Life of the Party
You have made more than 20 members in our community, wow!

Members Guru
You have received more than 50 likes on your posts. Our members really what you have to say!

Posts :

Points :

Topic preview directly from the forums (with Tooltip)

Overview

Description

This tutorial will allow us to insert a popup (tooltip) on the titles of the topics present in our forums and sub-forums. Once you have passed over a topic, a popup will open with a preview of our topic!

Demonstration

Topic preview directly from the forums (with Tooltip) 2021-084

Topic preview directly from the forums (with Tooltip) 2021-085

Technical limitations

› This tutorial is dedicated to the forums powered by Forumotion free forum service
› It works with all Forumotion forums' versions

Installation

CSS

CSS Customization

Here are the CSS classes you can use to customize our topic preview popup:

Code:

.fa_topic_preview

- refers to the whole box containing the preview, the topic name and the button
Code:

h2.fa_topic_name

- refers to the title of the popup
Code:

p.fa_topic_desc

- refers to the preview content; attention: this part of the formatting is defined by the topic itself
Code:

.fa_topic_button

- refers to the clickable button to see all content

Javascript & jQuery

For the next step you need to go towards Administration Control Panel (ACP)  Modules  HTML & Javascript  Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.

Title: free choice - does not influence the code effect
Where: All pages
Code:

You need to reply to the topic in order to see the code resources

In the first part of the code, only one change required for correct operation:

Code:: versionPost = "phpbb3";

- we will have to change the value of this variable depending on our version of the forum.
Accepted values are: phpbb2, phpbb3, invision, punbb, awesomebb, modernbb

Javascript Customization

We can also make some additional changes to the functionality of our plugin:

Code:

lengthPreview = 500

- indicates the number of characters to display in our preview, because once this number is exceeded, the preview will be cut and displayed "[...]" inviting you to click on the topic to open it and see the full content
Code:

view_topic: "View topic"

- indicates the text of the button to see the whole topic
Code:

loading: "Loading ..."

- indicates the text to be displayed in case the preview takes too long to load
Code:

view_err: "The topic was not loaded correctly."

- in case of an error this message will be displayed

Notes

	Approved by	Niko
	Approved on	January 30th, 2022
	Tested on	Most recent browsers
	Difficulty level	 / 
	Source	FMCodes