Latest topics
» IconSkouliki Graphics
by skouliki Today at 05:08

» "Edit this page" feature
by skouliki Today at 01:37

» Dark Mode + Another Question
by Haggis Yesterday at 10:36

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Van-Helsing Tue 17 Oct 2017, 15:07

» [GAME] What are you thinking right now?
by Ace 1 Tue 17 Oct 2017, 08:09

» [GAME] Count to One Million!
by Ace 1 Tue 17 Oct 2017, 08:07

» [GAME] Last Letter Game
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] World Snake
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] Never have I ever..
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] Animal Game
by universecat Mon 16 Oct 2017, 21:43

» [GAME] Post a random picture
by SLGray Mon 16 Oct 2017, 16:28

» Hi everyone!
by skouliki Mon 16 Oct 2017, 02:01

» Hai Guys~
by skouliki Mon 16 Oct 2017, 01:59

» Add a login popup for the toolbar
by Ape Sun 15 Oct 2017, 13:51

» Mobile Usability Test
by Ange Tuteur Sat 14 Oct 2017, 11:20

Recent Tutorials
Who is online?
In total there are 6 users online :: 0 Registered, 0 Hidden and 6 Guests :: 2 Bots

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Change the style of tooltips with tooltipster !

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9538
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 15 Mar 2016, 07:05

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


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


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 ! Yes 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. Wink


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


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

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


Last edited by Ange Tuteur on Tue 19 Apr 2016, 18:05; edited 3 times in total
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2447
Points : 4732
Reputation : 286
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Tue 15 Mar 2016, 17:03

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.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9538
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 15 Mar 2016, 17:37

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

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.
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2447
Points : 4732
Reputation : 286
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Tue 15 Mar 2016, 18:41

-30 worked. Thanks.
avatar
Van-Helsing

Title :
Coding Expert.
I.T Manager.
Web Developer.
Gender : Male
Age : 43
Posts : 844
Points : 2438
Reputation : 78
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://itexperts.forumgreek.com/

PostVan-Helsing on Wed 16 Mar 2016, 10:36

Very nice tutorial Thumb left Thank you very much @Ange Tuteur.

--------

avatar
Wilson

Title : Did I mentioned I like banana? Gender : Unspecified
Age : 31
Posts : 868
Points : 2232
Reputation : 124
Language : Filipino and Engrish
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://generalaxis.forums.com.bz/

PostWilson on Thu 31 Mar 2016, 11:22

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

--------

A banana a banana does not banana doctor banana. -Poetic
avatar
white
New Member
Title :
Gender : Unspecified
Posts : 6
Points : 575
Reputation : 0
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

Postwhite on Wed 11 Jan 2017, 17:05

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

http://3arb-way.a7larab.net/
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2447
Points : 4732
Reputation : 286
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Fri 13 Jan 2017, 16:28

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?
avatar
white
New Member
Title :
Gender : Unspecified
Posts : 6
Points : 575
Reputation : 0
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

Postwhite on Sat 14 Jan 2017, 07:02

I do not know why
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2447
Points : 4732
Reputation : 286
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Sat 14 Jan 2017, 13:44

Not why, but how does it not work?
avatar

Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 95
Points : 1736
Reputation : 26
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

Post on Sat 14 Jan 2017, 14:32

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."
avatar
white
New Member
Title :
Gender : Unspecified
Posts : 6
Points : 575
Reputation : 0
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

Postwhite on Sun 15 Jan 2017, 05:04

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

I do not know why Can you find out why?
avatar
white
New Member
Title :
Gender : Unspecified
Posts : 6
Points : 575
Reputation : 0
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

Postwhite on Sun 15 Jan 2017, 05:05

 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
avatar

Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 95
Points : 1736
Reputation : 26
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

Post on Sun 15 Jan 2017, 12:17

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.
avatar
white
New Member
Title :
Gender : Unspecified
Posts : 6
Points : 575
Reputation : 0
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

Postwhite on Tue 17 Jan 2017, 05:25

 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

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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