Talk:Tooltips

I have tooltips working, but they're not the same as the one on this page. They're just the regular tooltips. They don't follow the cursor, they look plain and they have a delay on them. I have the Javascript imported and I copied the CSS over as well. Did I miss a step? - Kelerik (talk) 02:19, March 25, 2014 (UTC)
 * Script didn't get initialized. Should work now. — Nanaki 10:00, March 25, 2014 (UTC)
 * It's working perfectly now. Thanks - Kelerik (talk) 17:00, March 25, 2014 (UTC)

I've been using the Advanced tooltips on my wikia (http://age-of-wonders-3.wikia.com/wiki/), but I've been unable to find a way to attack a background color - Some things dont let themselves get caught in a table easily, but the simple solutions like (Text) tags dont seem to work - regardless if allied inside the   tags, in the general span class of the tooltip, or around the template that supplies the actual tooltip. The latter of those provides background color around the words, but not between the lines, so when the text under the tooltips shines through, it makes it all unreadable. If you want to know what I'm talking about, check our Sandbox, the templates used are Unit (for generating the tooltip and passing on some variables)and Scoundrel (for providing the tooltip's content). I must say I'm relatively unexperienced, so I hope you can make something of the code in there, should the need arise. If there is some better way to generate an even background around the tooltips, I'd also be happy to know.

Gloweye (talk) 16:52, November 1, 2014 (UTC)
 * If I understand you correctly you want all tooltips to have a background that will get rid of the need to wrap the content in tables and have them be the background? I see I didn't add info about installing CSS styling for tooltips :/ I've updated the Installation section to include info on that. You can find what to put in Mediawiki:Wikia.css here. This will make all tooltips look like the first few on the sandbox page you linked. You'll want to remove the styles from the template that provide contents as it will produce double borders once the styles for tooltips take effect.


 * On the side note I'd advise using custom tooltips if you want to use them in that manner. This way contents of these tooltips won't be loaded until they are needed, significantly speeding up the loading time of the page, especially if there are a lot of them on one page. If you put this code above the script import on Mediawiki:Common.js the version of Unit template that can be found here will work the same way and load when needed.

var tooltips_list = [ {       classname: 'unit-tooltip', parse: '{'+'{BoxedTooltip|<#unit#>|rank=<#rank#>|size=<#size#>|upgrade=<#upgrade#>|upgrade2=<#upgrade2#>|race=<#race#>|tt=<#tt#>}}', } ]
 * Cheers, — Nanaki 16:13, November 2, 2014 (UTC)
 * First of all, thank you very much for your efforts. The code is quite a bit neater now, and loading times are much better. However, there's a few notes I'd like to give. First of all, my programming knowledge is pretty basic with just having some elementary c++ and what I learned in the past 2 weeks about Wikia, which might make me not understand some things that seem obvious to you.
 * 1)I appears the javascript has slight problems with numbers in the variable names; It refused to pass any variable after upgrade2, including the closing }} of the template. When I replaced upgrade2 with upgrades, the issue was instantly resolved.
 * 2)Javascript seems to regard 0 as undefined, and returns it as such(but not as empty string)? I got some Calc errors from imbedded funtions(Wikia #expr parsers), however taking -1 as a default value when unspecified instead of 0 appears to resolve this.
 * Once again, thanks for all your help. Some of my questions might result from me only having a really basic programming knowledge. The only real question I have left is this:
 * Is there a way to override the general CSS-formats with values specific to each kind? For example, I would prefer to keep the Ability (Template:Abil) tooltips in a table form, but I get the normal box around it, since that's specified in the .main-tooltip class. Also, the code appears to want to insert a lot of line breaks, which required me to insert a width override in the Wikia.css, but this is unneccesary for the Abil family. However, creating a seperate header in there (below?)with the name of .unit-tooltips doesn't seem to work - though it might be I didn't call it correctly?Gloweye (talk) 10:12, November 3, 2014 (UTC)
 * Ad 1) I fixed the 0 being passed as an empty string to the result. It was supposed to convert undefined parameters and zeroes got hit as the result (didn't account to the fact that jQuery.data converts strings to numbers on return XD).
 * Ad 2) I don't see why it would return 0 as undefined. jQuery.data returns undefined when there's no data- parameter querried. Make sure you pass the correct parameters.  takes the value of  . The fix above should detect undefined vars more reliably and return them as empty. If you get another example of returning undefined could you please post a link or screenshot to it?
 * Ad 3?) Tooltips get additional classes depending on the type but they aren't the same. Type is prefixed by . So unit-tooltip will have tt-unit-tooltip class. I've made them separate because any styles added to the   would carry over to the tooltip and vice-versa. This way   is the handle, and   is the tooltip itself, no need for additional selectors.
 * And thanks for the feedback :). I was trying not to make it to complicated but still leave a lot customization for ones that are able. BTW: You can add  at the end of the URL and it'll show the 'storage' below the page if you want to take a closer look at the results. — Nanaki 15:16, November 4, 2014 (UTC)


 * As I said, I think my problems might partly because of my inexperience with Java and Wikia editing in general - When I decided to try your scripts, I'd never seen it this close before - ,and me being this active maybe 2 week right now. If I encounter anything, I'll let you know, as I've managed to get everything where I want right now, though I might be going to play around some more with the CSS. I've also linked AoW3 Wiki to the Showcase part below - looks a bit empty, especially when you follow the LOL link and it turns out they don't use it anymore, even though I didn't remove the link. Might be putting up some SS as well, when I got the time. For now, I'm pretty busy transferring our data to usable templates, and I'm still learning about their logic by the day. Anyway, thanks a bunch! Gloweye (talk) 21:52, November 4, 2014 (UTC)

Breaks when in conjunction with lists or indents
When used in conjunction with a list, it looks like this:
 * Advanced tooltips Tooltip content

The title remains hover-able with the little question mark and an empty pop-up box will appear - but the intended contents just spills out as if the tooltip functionality isn't there. There's also severe formatting issues on pages where this issue happens multiple times in succession.Emptylord (talk) 18:46, December 2, 2014 (UTC)
 * That's due to MediaWiki limitation. There's no way to put a table inside the list element using pure wikisyntax. Line break required to create a table also will end the list element, and MW doesn't care if there are open tags. One of these has to go pure html for this. Either the table has to be wrapped inside  tag, or (best in this case) convert the table to html. But tbh all the power lies in custom tooltips. Advanced tooltips are good for one time use formated tooltips. Things like you want to create are best done via custom tooltips. All the formating sits in a template that is called when needed. Take pl.lol for example. Champ tooltips are called by simple   and the result is taken from the the template called with that parameter. In your case it would be best to do simple subpages of the main one similar to the rest of declared tooltips on pl.lol. — Nanaki 17:55, December 2, 2014 (UTC)
 * I've had the same problem on http://age-of-wonders-3.wikia.com/, but our solution was HTML lists. Later on, we converted to Custom Tooltips anyway - they do work everywhere, and might be easier on a many-editor wiki like LoL. If you want a practical example of this kind of tooltips, you could check it out this Ability Tooltip, which renders entire tables from template, and has the preceding picture integrated.


 * Edit: If you're planning on using Tooltips on abilities to, you might want to use custom tooltips anyway, since the java script can not render those - otherwise, it's a pain to do in advanced tooltips. This is because advanced tooltips will try to render inside the other tooltip(regardless of HTML lists), pushing it upwards to make room for the other tooltip. This can in the best case result in having the tooltip render behind the Wikia's general header, or even push it completely out of the screen. Also, load times rise really fast that way. Gloweye (talk) 18:06, December 2, 2014 (UTC)

Using divs laid out to resembles tables; divs using display-table; and HTML tables produces the same issue as mediawiki's tables. I guess I'll have to look into custom tooltips. Emptylord (talk) 18:46, December 2, 2014 (UTC)
 * I've put a small example on your page - though Custom Tooltips are the better route. Gloweye (talk) 19:11, December 2, 2014 (UTC)

Tooltip Classes
Hey, It's me again. I'm a bit more experienced now, and I'm trying to get a hold on the tooltips with some other javascript. Is there anyway I can dynamically assign them a unique ID/class upon creation, even if the call is the exact same? I don't mind if that means me making some slight adjustment to your code and copying it down - I'm just not yet really good enough to find the place where I could do that in your code.

Gloweye (talk) 10:56, December 14, 2014 (UTC)
 * If the call is the same then it's done only once and the same tooltip is used in all instances of this call. That's why you don't have to wait for the tooltip to load. Same call = same result then there's no point to fetch it again ;). If you want to make some changes to the tooltip when it's shown you can use the  and   callbacks. I've just updated it so the element that triggers the tooltip is passed as an argument to the callback functions so you can make further changes to the tooltip depending on the handle that triggered it. — Nanaki 13:32, December 14, 2014 (UTC)

JS Events
I'm failing or rather I don't know how to find the event which triggers loading the commentsection.

E.g.: http://leagueoflegends.wikia.com/wiki/Ohmwrecker (scroll down) -- Ninjamask (talk) 09:17, September 12, 2015 (UTC)


 * I don't see any special event that would be fired when comment section is loaded... but it doesn't mean it can't be done ;)
 * Paste what's below along with the config for tooltips and add  to the custom events. Basically it'll wait for the element containing comments and fire off an event when it's created. And it'll work when changing comment pages too.

$('#WikiaArticleComments').bind('DOMNodeInserted', function (e) {   var elem = $(e.target)    if(elem.is('#article-comments') || elem.is('#article-comments-ul')) {        $(window).trigger('ArticleCommentsLoaded', [elem])    } });
 * — Nanaki 19:10, September 14, 2015 (UTC)


 * Great it works fine now. -- Ninjamask (talk) 20:04, September 14, 2015 (UTC)