Fandom Developers Wiki
Advertisement

This is the talk page for discussing improvements to the Tooltips page.

Untitled[]

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 tooltip-contents 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. <#some-parameter#> takes the value of data-some-parameter="...". 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 tt-. So unit-tooltip will have tt-unit-tooltip class. I've made them separate because any styles added to the <span> would carry over to the tooltip and vice-versa. This way .unit-tooltip is the handle, and .tt-unit-tooltip 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 ?ttdebug=true 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
    Including HTML tags

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 <li> 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 <span class="character-icon" data-character="Lulu">Hover handle</span> 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 onShow and onHide 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 ArticleCommentsLoaded 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)

JS Events 2[]

I'm failing again to find the event which triggers loading tabber pages.

Like on http://leagueoflegends.wikia.com/wiki/Patch_Notes and http://leagueoflegends.wikia.com/wiki/Champion_skin/Skin_themes -- Ninjamask (talk) 17:39, October 15, 2015 (UTC)

Come to think of it, I should be adding events for Wikia's features to the main script ^^. Feel free to remove the event for comments, I integrated it to the main script. I'll look into the TabView and add it asap. If you find some more, drop by :) — Nanaki 18:16, October 15, 2015 (UTC)
Re: an event for article comments, I used window.ArticleComments.initCompleted to tell if article comments are loaded or not (see the commentsLoaded method in MiniComplete/code.js). I forget if it's a boolean or just undefined before they load, but it's the closest thing to an event they built into article comments afaik. cqm 08:15, 17 Oct 2015 (UTC)
That wouldn't help thou. It'd work for the first page, but once user changes it, it's back to square one. The jQuery "element listener" isn't ideal, but it's that or injection, and that's a pita with async when possible. — Nanaki 00:42, October 18, 2015 (UTC)

Well, it's kinda embarrassing I didn't notice it sooner XD. mw.hook('wikipage.content') is the answer. As long as Wikia's engineers keep adding it for elements added by JS, Tooltips will work with them. That goes for other scripts too. Now the whole support for events seems irrelevant :P — Nanaki 15:48, October 18, 2015 (UTC)

Great, thanks. -- Ninjamask (talk) 18:24, October 20, 2015 (UTC)

Z-order in previewing[]

Is it possible to change the z-order of the tooltip? So that while editing a page I can see the tooltip in the preview window? (I'm using source code editor.) -- Ninjamask (talk) 18:36, October 20, 2015 (UTC)

Sry I didn't answer sooner – I'm didn't get the notif for some reason :/. Anyway, I added z-index to the example CSS for the script. You need to add it to the #tooltip-wrapper element (yeah, that high – edit preview has something like 5 milion) — Nanaki 22:45, November 17, 2015 (UTC)

#var# appearing in template[]

{
        classname: 'passive-progression', 
        parse: '{'+'{Tooltip/Progression|<#size#>|<#var2#>|<#var3#>|<#var4#>|<#var5#>|<#var6#>|<#var7#>|<#var8#>|<#var9#>|<#var10#>|<#var11#>|<#var12#>|<#var13#>|<#var14#>|<#var15#>|<#var16#>|<#var17#>|<#var18#>|<#var19#>|type=<#type#>}}',
}
Emptylord TooltipIssue

Javascript version not verified - using test mode.

Involved templates

What am I doing wrong? O_o

(P.S. Ignore the mess of table that I'll fix later - unless you have a clean solution to that too.) Emptylord (talk) 00:45, October 31, 2015 (UTC)

Tried my luck ... but no clue why it doesn't read the data. -- Ninjamask (talk) 20:06, November 17, 2015 (UTC)
Sry, my bad. I didn't put numbers to the valid characters for some reason. Fixed. — Nanaki 22:47, November 17, 2015 (UTC)

Breaking in tables[]

When using Tooltips within a table, these Tooltips are not able to end the table row. When they are the last entry for a table row, the Tooltip breaks vertical alignment.

The code (Image) results in (Image), when Tooltip's is the ending entry for a table row.

However this code (Image) results in (Image) which isn't perfect, but allows for the margin, padding or something to be rendered correctly.

Is there a way around this problem? Gay Kiwi (talk) 00:09, May 23, 2016 (UTC)

Edit #01: When using Colspan to try and "trick" the end, it breaks as if its the last entry as well

The issue was with the template itself. When transcluding a template, it's entire content is used, including whitespaces. <noinclude> tag was used here to exclude the documentation template from it, but the 2 additional lines were up for transclusion. Nothing to do with the script, just MediaWiki quirks. Fixed it. — Nanaki 00:20, May 23, 2016 (UTC)
That's not counting the script isn't even initiated on your wiki. You need to contact Staff to enable custom JS on your wiki, it's not available by default at the moment. — Nanaki 00:22, May 23, 2016 (UTC)
Hey thanks for that, I didn't think that would be the problem when I tried bug testing. Sorry for the hassle.
And it still works nicely (without the added extras I guess xD, but done anyway. Thanks againGay Kiwi (talk) 00:47, May 23, 2016 (UTC)

Tooltip's Width[]

Most of the time, the width of the tooltips are 1 pixel off. Let me explain, the width is correctly the same as the original content but when rendered, he last word of a line goes to the next line (like on this documentation page for "advance", "custom text" and "combined" tooltips). This occurred on all browsers I've tested (chrome / firefox / safari)

Are you aware of it ? Is there any special advice for this ?

The simpliest way was just to add 1 px to the width of the tooltip and it was fixed.
Would it be possible to edit calcSize to increase a bit the width ?

$this.data('width', $this.width() + 1);

Is it calculated only once per tooltip ? or each time it appears ? (in which case, the previous code could endlessly increase width and would be bad)

Matxx25 (talk) 21:51, May 6, 2017 (UTC)

Your solution would work, because calcSize temporarily removes currently set width so it can really calculate it. But actually the perceived width is as it should. Issue is with the element having a fraction that is rounded down by jQuery. Ex: advanced tooltip on the docu page was too narrow by 0.141px. That's why the line breaks, even though the element doesn't change width when there's no line break. This should do the job, once the cache clears. Thanks for pointing it out. — Nanaki 23:19, May 8, 2017 (UTC)
cool, thanks !
It's not really important but it still happens in the storage (you can see it in debug mode Tooltips) because you temporarily store the width in another variable and using jQuery which is rounding down like you said var temp = $this.css('width')
Matxx25 (talk)
It's just $this.width() that's rounding values. $this.css('width') returns a text value so no info is lost here. The reason tooltips in the ttdebug=true storage aren't displayed in proper width at first is because the width calculation happens right before displaying the tooltip. So it's kind of by design so it doesn't waste resources on unused tooltips. — Nanaki 13:40, May 12, 2017 (UTC)
I'm not sure why but with your lastest 2 commits, the width of tooltips has really expanding, making a lot of unused space. Look at basic/adv, custom text & combined examples
Ehhh. I moved the wrapper to be a direct child of <body> tag, but ofc I forgot one thing… font-size difference between the wrapper and storage. Width is calculated with storage's bigger font-size and displayed in smaller for body. I guess I'll just hardcode a fixed size for both. Breakpoint changes have no business there anyway. — Nanaki 21:05, July 1, 2017 (UTC)

Update?[]

I see "Tooltip" was updated but - it forces default styling and ignores one I set month ago (which worked fine).

And after changing "dev:Tooltips.js" to "dev:Tooltips/code.js" in ImportJS - they don't show up at all.
-- MtMB (talk) 10:15, November 22, 2017 (UTC)

I updated it so I could move the CSS from article namespace to MediaWiki namespace, but it looks like I overlooked possible issues with importing CSS through JS. Anyways, prefixing your tooltip selectors with body worked for me.
dev:Tooltips/code.js does not work because MediaWiki:Tooltips/code.js does not exist.
-- Cube-shaped garbage can 10:28, November 22, 2017 (UTC)
Thank you. Still gives rounded borders though, had to add "border-radius:0;".
-- MtMB (talk) 10:42, November 22, 2017 (UTC)
As it's you overlooking stuff, how about we just reverse the damage you've done ? It broke every tooltip on my Wiki which worked fine before. Custom tooltips here. And that's not just CSS, that's all tooltips not showing.
Gloweye (talk) 13:45, November 22, 2017 (UTC)
Same here, my custom tooltips here not working. I also visit some wikia that use custom tooltips, there also not working. example: leagueoflegends, smite
Djamboe (talk) 13:54, November 22, 2017 (UTC)
That seems completely unrelated to the bug MtMB mentioned so I reverted that part of the edit. Which is weird, since I mostly just added semicolons where the JS editor was complaining, but hopefully it will work after it's approved again. Sorry for the inconvenience! -- Cube-shaped garbage can 14:26, November 22, 2017 (UTC)

This is why I didn't include CSS import in the first place. The CSS was supposed to be an example to be copied and customized, instead of imported. Reason being that importArticles adds the style sheet after one for Common/Wikia/Monobook.css, overriding their contents (or require overqualification/!importants). Though since then I noticed importArticles returns inserted link tags, so you can move them in a more appropriate spot, making them lower priority than community css. — Nanaki 01:46, November 24, 2017 (UTC)

I'm getting a wide box around my tooltips now. Anyway I can locally prevent that CSS import ?
Gloweye (talk) 06:49, November 24, 2017 (UTC)
You can now. And by "now" I mean "once the change is reviewed" :) — Nanaki 14:08, November 24, 2017 (UTC)
Thanks! Gloweye (talk) 16:26, November 24, 2017 (UTC)

redirect issue[]

How to fix it? -- Ninjamask (talk) 05:50, November 27, 2017 (UTC)

it is not redirect issue. it is malformed title for parser api. will be fixed soon. Fngplg (talk) 06:07, November 27, 2017 (UTC)

broken tag nesting[]

on the doc page, some examples uses weird tag nesting: div placed inside of span. aside of breaking html standards, it is breaks some wikia-related things, like this one. i suggest to change span to div with display:inline-block - it will save span-like behavior, and will not break html. Fngplg (talk) 00:39, June 26, 2018 (UTC)

Custom tool tips avoiding enabling wiki js[]

This is working much better than the CSS only tool tips I was using--mine worked, but loaded a lot of unnecessary stuff.

A suggestion--if you create a default custom tool tip if tooltips_list is undefined, people could use it just by adding dev:Tooltips.js to their ImportJS page without having to ask for js to be enabled and then for code reviews. Something like:

{ class:'custom-tooltip',
  parse:'{'+'{<#template#>|source=tooltip|param1=<#param1#>|param2=<#param2#>|param3=<#param3#>|param4=<#param4#>|param5=<#param5#>|param6=<#param6#>}}'
}

Then anyone could use it with just class="custom-tooltip" data-template="Mytemplate" (or ":MyPage" with <includeonly> around the synopsis), data-param1="SomeParam" if needed, etc.

For that matter, the config and custom classes could be read directly from tags and attributes in the HTML to allow full customization without any user js. I don't know what all tags we can pass through here, but if nothing else a div with a certain class and display:none would work. It just seems like having to go through the read tape probably discourages a lot of people from using this.

Is this still under active development?

PlotinusRedux (talk) 22:13, August 28, 2019 (UTC)

CSS animation[]

I've added a fade in animation using CSS when hovering over an element with a tooltip. I've been trying to figure out a way to have the animation reverse when mouse hover has finished, but with no success. This is the css I've used so far:

.main-tooltip {
-webkit-animation: fadeIn ease 0.5s;
-moz-animation: fadeIn ease 0.5s;
animation: tooltip 0.2s;
animation-direction: normal;
}

@keyframes tooltip {
0% {left: 0px; top: 20px; opacity:0}
100% {left: 0px; top: 0px;}
}

Would anyone with more CSS experience be able to help? Thank you

Dana Scully Fan (talk) 10:05, August 2, 2020 (UTC)

Use animation-direction: alternate; instead. Suggon (talk) 18:22, 4 June 2023 (UTC)

Tooltips no longer works in recent UCP update[]

Hey, Wiki Manager for Re:Monster Wiki here. Recently helping out the admins for this wiki and updated the Site-wide Javascript to match the update instructions. When updating and using Test Mode when I made the edit (11/5), Tooltips was working again. Now approved, it no longer works. I have updated their ImportJS to put Tooltips at the top of the list but have no luck. I'm pretty sure a recent UCP update screwed with this again. I don't know where to begin but just wanted to throw this out there. NoGround (talk) 13:25, November 12, 2020 (UTC)

Tooltips on Mobile[]

I'm a relatively new wiki admin, working on the Aeon's End Wiki. I started using tooltips to display cards when a card name link is hovered over. See our Sandbox for a few examples. The template can be seen here.

The images in the tooltip display automatically on mobile, rather than being hidden (see Sandbox on mobile). Is there a way I can hide the tooltip content on mobile, while keeping the text link intact? Changing my tooltip template type to something that doesn't display on mobile (e.g. Notice) gets rid of entire thing, including the text link, so that won't work.

NSpeckles (talk) 05:58, November 13, 2020 (UTC)NSpeckles

You could try putting tooltip content in a separate template with a template type that does not display on mobile. -- Cube-shaped garbage can 23:55, November 13, 2020 (UTC)
Good idea, it works! Thanks for the help. NSpeckles (talk) 21:43, November 15, 2020 (UTC)

Tooltips not working after importing[]

Hi, after importing the script to the Pretty Cure Wiki, it is not working not working properly, which can be seen here. However, on the Symphogear Wiki where I used the same method (with only importing the script), it is working fine. All I did was to import the script, but on the Symphogear Wiki this script was imported before the UCP migation while on the Pretty Cure Wiki was after the migration. Does it have to do that the script was imported on UCP that it is causing it not to work? GotenSakurauchi (talk) 15:43, January 27, 2021 (UTC)

https://narutoxborutoninjavoltage.fandom.com/wiki/Naruto_Uzumaki Giannaras99 (talk) --Giannaras99 06:17, 17 May 2021 (UTC) i don't know how to fix the tooltip its makes a big yellow block arround my table . can you see if its something i did wrong? i don't know if it's a bug.

Mobile linebreaks[]

Hello, when using this on mobile, it forces a line break after the tooltip text but ONLY on mobile. This is what I have:

<includeonly><div style="display:inline;" class="advanced-tooltip"><span class="{{{class|}}}" style="display:inline; text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1px;">{{{1}}}</span><div class="tooltip-contents hidden"><table class="{{{class2|}}}" style="border-left: solid 5px #ff9c2c; width:275px; height:75px; padding-left:0.3em;"><!--

--><tr><!--
--><td style="padding:4px; font-weight:bold;"><big>{{#if:{{{2|}}}|{{{2}}}|{{{1}}}}}</big></td><!--
--></tr><!--

--><tr style="border-style:none;"><!--
--><td style="padding:4px;">{{#if:{{{caption|}}}|{{{caption}}}|}}</td><!--
--></tr><!--

--></table></div></div></includeonly><noinclude>{{Documentation}}</noinclude>

Can you help me avoid these linebreaks because they interfere with mobile readability. Thank you! Kuhlau (talk) 14:16, 23 March 2022 (UTC)

Never mind. Realized I should have just been using span instead of div. Kuhlau (talk)

tooltips on blocks added by JS[]

Are it possible to get tooltip when hover mouse over blocks added by JS (mw.api expand templates\parse)? Or it works only when block added in page with editing?

Infoboxes as tooltips.[]

Is it possible to use infoboxes templates as tooltips?

The pop-up tips[]

I am new for using extensions. I would like to ask what can I do if I do not need the default background of the tips? I have done a template to work as the background, just like below. What I can do to remove the default background or how can I change the background in my own wiki?

words
words2

UBBBBBBBBU 03:07, 28 October 2023 (UTC)

Advertisement