Forum:Tooltip help

I've been wanting to make tooltips for Wakfu wiki for a while, and I finally took the time to do it.

I've searched the forums and found this topic: Wowwiki tooltips code

I copied the basic codes and included it on a template I already had on the wiki: Css Js Page template Tooltip template Page with the tooltip (I've just used it on "Ruby" for testing, its one of the first links)

However, it's not working. It just shows it as a normal link. I've checked the codes of the wiki of the person who asked on that topic, and from what I saw, everything is the same on mine (the needed basics anyways).

Anyone know what could be causing it not to work?

Or, if that's easier, how do you load parts of a template according to its page inside another template? I could use an existing tooltip (the first tooltip section of the css) to make it, instead, if I knew how to do that. Would it be possible within a dpl? Or is there something else that allows you to do it? Yechnagoth 10:37, January 15, 2012 (UTC)


 * At one point I also wanted to play around with these tooltips and have also found the existing guides, including the one you linked, insufficient. Once I finally made the tooltips work, the delay before the tooltip had shown up, was too big. With the help another user, I managed to optimize the tooltip and reduce the delay. I can't offer you a fix, but if you're up to it, you can copy the code I have on my test wiki and replace the one you have on yours. The code:
 * JS
 * CSS
 * Working example
 * The working example page also has a lightweight, CSS-only tooltip, for which the code can be found here - it has some advantages over the Ajax tooltips and if you're not planning on displaying any complex content, it might be more appropriate. Also, disregard all the weird stuff going on on the wiki ;). — Sovq 12:24, January 15, 2012 (UTC)


 * The css only tooltip is also in use in my wiki, but it would be to take other pages really, not anything else, and I have no idea how you'd do that within a template instead of js. Isn't there any way to take the info of a template contained in a page and make it go somewhere (just like dpl tables do, but it wouldn't be a table)? If so, I'd really prefer css.


 * I'm going to test the js example you gave me. I'll report the results later.
 * Update: It is working now, though it does take a while to load. Still, better than no tooltips. You can still just go to the page directly if you don't like the loading time. Thanks once again, Sovq! :)
 * Yechnagoth 13:25, January 15, 2012 (UTC)


 * I have a question: can the code be modified so then you can add the class "ajaxttlink" in an span, div (or table row) which contain the link? Example:

Link

Link 1, Link 2

And another question: if I add the class "tooltip-content" to a wikitable (like an infobox) will it work or do I have necessary wrap the infobox in the div? Because I think using the div creates problem with the floating...

About one of your questions, Leviathan, I think you could just wrap the entire table inside the div. I have many templates with tables inside divs and never had a problem. Yechnagoth 15:37, January 17, 2012 (UTC)


 * I did and it works, the table is oddly shown, maybe due the css float attribute.


 * Could you link it? From what I've used, the table is never touched by any of the div attributes.
 * Yechnagoth 15:59, January 17, 2012 (UTC)


 * Umm, now I've got an issue on the css tooltip. It was working perfectly fine, but it now has stopped working even though I didn't touch the Css and it was working fine just with the template modifications (it stopped after doing ctrl+f5 thing to reset the cache, which I always do after updating CSS). Perhaps its because of the wikia blockout thing though. I've put some examples here
 * Yechnagoth 11:45, January 18, 2012 (UTC)


 * I see four tooltips captions, each of them properly displaying tooltips there. What do you see? — Sovq 12:04, January 18, 2012 (UTC)


 * That's weird. On the other computer here and on another OS in this same computer (Mac osx), it just displays a normal link, nothing loads, and before that, it displayed what should be tooltips like if there were no tooltips, just the content, one after the other, after bypassing the cache that it showing just the links. The browser is the same so I'm really at a loss here, can't be that. I've just came back to windows and tried ctrl+f5 and it continues working just as before.
 * Yechnagoth 12:32, January 18, 2012 (UTC)


 * Another thing I've discovered: It is not the template (made a simple test test  and it was also not displayed). And if its not the browser either... guess that leaves it to the css code. I've copied yours and just changed formatting stuff (width, color, background and shadow), but perhaps I broke something on the way... I'll see if I can't find what's wrong.
 * UPDATE: It was a ridiculous error again :P. Just because the bottom value was negative it was broken... I'll see if its working on all places now. The first one has passed (the other computer).
 * Yechnagoth 15:25, January 18, 2012 (UTC)


 * The tooltip seems to be working on w:c:wakfu:Template:Item, but the layering and positioning are still problematic. Can you give another example page link (with the name of the link that should show the tooltip)? -- Fandyllic (talk &middot; contr) 18 Jan 2012 1:45 PM Pacific


 * You can find it on this page as well, on the drops part. The loading time is decent now, still a little slow, but not as much as before. It was taking around 4 seconds to load before I changed the z-index value. I guess the only real issue now is the layering. Haven't tested it much yet, its still not being used on many pages. The css tooltip is working fine as well as far as I can tell. example (the green links on the bottom). Yechnagoth 20:56, January 18, 2012 (UTC)

Sorry, but I'll annoy you with my questions once again: The css tooltip I made has to have positioning because of the image/etc. I can't use span because it creates a second tooltip. I tried using a table the first time, but discovered it got the formatting of the table you put it inside (thus having colors/etc, while I wanted it to be invisible). So I remade it using divs. With divs, however, if I put it inside a list it breaks. So... Is there any other way to make positioning, or any way to make a table inside the other not take the formatting of the outside one? Or even, a way to use divs without breaking on lists?

Yechnagoth 20:05, January 19, 2012 (UTC)
 * Examples
 * Template

About what I've said before... here the test page, this is the js code and here (bottom) the css code. In IE9 looks fine, but with firefox it's not so good.


 * The first tooltip (Standard) shows just as it is in its page here, without any problems (at least that I know, you can see how it looks here), and I'm using firefox. The other ones don't show anything. But I guess that would be because it won't work because of the way the code is. The only problem is with the layering of the top navigation, that gets on top of it.
 * Yechnagoth 00:16, January 21, 2012 (UTC)


 * The other codes where just tests, it would be wonderful if the code could work with those too, but I'm seeing problem with firefox: the tooltip show up above the link and overlaps the wiki navigation bar (the buttons and the wordmarks are in the foreground, making the toolyip unreadable), this don't happen in IE which shows the tooltip under the link.


 * It happens the same thing here, its not the table fault though, the tooltip I have has no tables and still have that issue. But unfortunately, I can't help you with that =/. I didn't search how to solve it as its rarely going to be an issue for my wiki (if at all).
 * Also, I think if you put it on a template it gets easy enough to use it so that it doesn't matter you can't do it with those codes (Like )Yechnagoth 00:50, January 21, 2012 (UTC)

Wow... This has to be the most stupid fix I ever made after forgetting to close a tag and the negative value. That bug on lists was caused by nothing more, nothing less than.... A space. Yes, just because the last switch started on a new line. It works now. *speechless*. It still loses the color formatting and a margin value, but it no longer gets text outside the tooltip. Edit: I paid so much attention to fix the things outside that didn't notice it was my fault the color and margin were off. Its working perfectly now. Damn space. Yechnagoth 15:51, January 21, 2012 (UTC)


 * I'm pretty sure I had accidentally found a fix to the overlapping the header thing, but I can't remember it right now. Maybe it had to do with setting a specific z-index for the header items...
 * -- 20:21, January 21, 2012 (UTC)