Change the style of tooltips with tooltipster !

With tooltipster you can enhance the style of the tooltips on your forum, allowing you to make them fit with your theme or personal tastes.

Click to view demo

This plugin is already pre-installed on all forumotion forums thanks to a recent update. All we need to do is execute a script on all elements with a title attribute.

Installation

For this to work you first need to enable the following option. Go to Admin Panel > General > Messages > Configuration and enable the option entitled "Activate the preview of profiles on the tag usernames." Click save and then go to Modules > JavaScript codes management and create a new script with the following settings.

Title : Tooltipster Tooltips
Placement : In all the pages

Code:

$(function(){
  // general options for editing the tooltip
  // see more : http://iamceege.github.io/tooltipster/#options
  var options = {
    animation : 'fade',
    arrow : true,
    speed : 300,
    delay : 300,
    onlyOne : true,
    theme : 'tooltipster-default'
  },
 
  // delay execution by placing the function into another queue
  // helps with applying to other JS created elements such as the editor
  queue = true,
  titles,
 
  parse = function() {
    titles = $('[title]');
    titles.tooltipster && titles.not('[title=""], .mentiontag, .tooltipstered').tooltipster(options);
  };
 
  queue ? $(parse) : parse();
});

When you're finished click save and your tooltips should now display differently ! To find out how to change the options and more please see the next section.

Modifications

At the top of the script you should see an options object. This object contains the general settings for the tooltip, such as the display animation, delay, and theme. To find a full explanation on the options please see this page. Options that aren't included can be added in by creating a new property and value in the object.


theme : As the main options are already covered I'll go over how to install and change the theme. The tooltip themes are installed via a CSS classname --

Code: .tooltipster-default

for example. To change the theme all you need to do is change the classname, which can be found in the options object under the "theme" property. These are the currently existing themes for tooltipster :
https://github.com/iamceege/tooltipster/tree/master/css/themes

You can preview them here : ( FYI Forumotion uses "shadow" as the .tooltipster-default theme. )
http://iamceege.github.io/tooltipster/#themes

Click on one of the files and then copy and paste the code to Display > Colors > CSS stylesheet. For example, if I chose the "tooltipster-punk" theme, I'd change this part of the script :

Code:

    theme : 'tooltipster-default'

into this :

Code:

    theme : 'tooltipster-punk'

Thus making my tooltips more punkish.


If you have any questions or comments feel free to leave them below. Be creative and make your tooltips awesome !

Notice

Tutorial written by Ange Tuteur. Tooltipster jQuery plugin by Caleb Jacob. Reproduction not permitted without consent from the author.

Is there a place where we can see the different themes in action?

Thanks for sharing this amazing tutorial.

Edit: I have noticed one issue. The tooltips appears to cover the thing I have the cursor on. It does not appear above it.

Oh right, you can see the themes here. I'll add that in, thanks.

I think it might be related to the theme, try adding the CSS code below :

Code:

#wrap {
  margin-top:30px;
}

If that doesn't work try changing the 30px to -30px.

-30 worked. Thanks.

Very nice tutorial Thank you very much @Ange Tuteur.

I've been looking for this kind of tutorial, google doesn't always helps. Thanks for the tutorial!

Does not work here, there seems to be a problem? can you help me

http://3arb-way.a7larab.net/

white wrote:Does not work here, there seems to be a problem? can you help me

http://3arb-way.a7larab.net/

How does it not work?

I do not know why

Not why, but how does it not work?

Did you make sure to enable the following option ?

For this to work you first need to enable the following option. Go to Admin Panel > General > Messages > Configuration and enable the option entitled "Activate the preview of profiles on the tag usernames."

SLGray wrote:Not why, but how does it not work?

I do not know why Can you find out why?

 wrote:Did you make sure to enable the following option ?

For this to work you first need to enable the following option. Go to Admin Panel > General > Messages > Configuration and enable the option entitled "Activate the preview of profiles on the tag usernames."

Yes it is already activated

Hmm.. it may or may not be related to a JS error on your forum. Try disabling all scripts except the one you want to use.

 wrote:Hmm.. it may or may not be related to a JS error on your forum. Try disabling all scripts except the one you want to use.

I'll do it now