The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Tooltip in recent posts

View previous topic View next topic Go down

Tooltip in recent posts

Post by APE on Tue Mar 01, 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 Messages and e-mails Configuration

enable the preview for username tags like in the screen shot.


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


The javascript code




ACP Modules Tab HTML & JAVASCRIPT JavaScript codes management create a new js code

  • 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:
<!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 <!-- END switch_topic_title -->


Replace with:
Code:
<!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" class="my-tooltip" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 <!-- END switch_topic_title -->

And we save the changes
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






APE
Manager
Manager

Male Posts : 8326
Reputation : 717
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum