I’ve been using some icon templates which has tooltips but comes at 1 sec later, the lag doesn’t provide good experiences for PC users, even worse for tablet readers since they can’t do the mouse-over.
I believe a update is necessary for these templates and my ideal tooltip are like the Achievement icons, they pop up immediately when mouse is over them for PC users, and pop up when tablet users touch the icons, could anybody teach me how make the icon templates like this?
The reason for the difference is that the current template just uses the tooltip-like treatment of HTML titles by most browsers. If you want to use tooltips more like those found with the Achievements features, you should use something from the FANDAOM Open Source Library such as Tooltips.
But I'm not familiar with codes, if you could elaborate by step that'd be great, I just want the effects like the Achievements tooltip: Bold titles on top, some texts below, and the enlarged version of the pic to the left.
Well, I never use the script my self but they seem to have fairly understandable documentation on the page I linked to. It tells you how to install it, the different capabilities, and how to create the tooltips.
What I meant is that copy-and-paste won't work. I found that most of the time, when people ask "Can I use this?", they mean "Can I copy-and-paste this and have it work?" not, "Will this work if I make significant alternations?". But perhaps in this case I misunderstood the intention of Islandking's question.
it is custom one. however, u can use tooltip_atilla as tooltip in css-version.
although, if u already using tooltip.js, there is no point to use css version. 2 versions of tooltips will more likely confuse editors.
What’s import, is there any extra step that should be done between creating .css and setting up the tooltip template? Sorry for being dumb here... For now, I think I’ll stick to the .css solution, seems easy enough for me to handle.
@Andrewds1021 I can do some basic modifications to the templates, but I don’t know how .css & js works with them, which is why I was asking for an “easy” workaround, but thank you anyways, it’s always good to know there’re more ways to achieve the goal.
Fngplg wrote: arbitrary css will not work unless u import it somehow. i'd recommend to use @import. place it at the top of common.css.
With some help, the Tooltips.css was set up on the wiki I'm currently working on, the overall result is decent, with only one problem: the tooltip box aloways shows on the left most, and from what I've heard, it might not be possible for the box to trace where the cursor is, thus opening the box based on the location of the cursor, I wonder, is there any alternatives for the .css to solve that?
I mean the tooltip box now from the .css above pop-up on the left side of screen no matter where the text is, so it'd be confusing sometimes if the text is on the right side of the screen. If the box were to show up in the middle, it'd be better...
OK, that's one solution, but is there a way to make the box always appear in middle of page, because, edits may change the position of the texts, making the previous parameter unfit and it'd not be convenient to change the parameter everytime it happens.
I wonder if some lines in tooltip.css can be changed to achieve that.
what purpose you want it use for? if u need generic text tooltip, then you need nothing other than standard "title": help:tooltips. if you want to pair it with some images, as stated in the 1st message of the thread, then then u could use 100-200px width (right now it is 200), depending on usage of images.
Correct me if I'm wrong - if I use b-fix on the text which positions on the right, then after some edits (by me or anyone else), the text moves to the left side of screen, this will make the box not visual at all, no matter the width. And I assume original "fixed" position won't have this problem?
So my request is, is it possible to fix the position in the middle instead of the left, if not possible, I can stick to the left no problem.
Just want to be sure, in the .tt1 . tt2-c section, there're position, display, width, margin-left, padding-left, padding-right, border, box-shadow, which ones are to be replaced and which ones should be left alone to maintain the styling? Thanks.
I am not sure I understand your reasoning behind why it isn't a good idea to have it appear in the middle of the screen.
tooltips has hard link to parent element. when u hovering mouse over element, u expect tooltip right here, not somewhere else. "tooltip" at the center of screen it is no tooltip, it is weird thing floating around, shown\hidden by arbitrary rules. floating window, shown at random time, is confusing.
I not sure I understand your first question. .tt1 .tt2-c is an additional CSS rule; it isn't replacing any of the ones you currently have. As such, it will override/set the values you set in it but leave everything else untouched. Therefore, you don't have to worry about things such as display, width, margin-left, and padding-left as they are already specified in .tt1 .tt2 and .tt1:hover .tt2.
As for your clarification, I think it is possible but you would need to change the template. Something like this:
Unfortunately, it looks like it can't be done. I got the idea from an online thread that I saw where they wanted to set horizontal based on ancestor and vertical based on browser window. However, the solution does not appear to be applicable to our situation (horizontal based on browser window and vertical based on ancestor). The reason seems to be that 'auto' (part of the solution on the thread I found) is calculated differently when dealing with 'left'/'right' versus 'top'/'bottom'. For that matter, since W3 appears to not explicitly define 'auto', it can be browser dependent; meaning it may show differently on different browsers.
In starting line of the 1st page, using template:BG breaks lines, it isn't supposed to happen, the three icons should be lined up like the 2nd page, but as you can see, the 2nd page is also not working very well, as the expected toolbox didn't appear when hovering onto the icon, for it to work, I have to false-edit the page, then the result will be like the 1st.
Edit: more issues, when placed within infoboxes, the box will be blocked by the next infobox row, example page, hover over to the golden colored Shadows of Amn to see. Plus the image doesn't always show in the tooltip box, despite showing correctly in the template page.
For the line break issue, I believe the issue is that you have the opening noinclude on a separate line. Try putting it immediately after your closing div.
As for the cutting off, it is the same issue as what you were having with tooltips that were too far to the right. I have found a solution to both as it is the same cause. Note, however, that this will allow other content to "spill" out as well; so you may not want to use it.
Yes, you may need to do a null edit to get the server to re-render with the new template. Not sure if you know this but, instead of taking multiple clicks for a null edit, you can purge the page by altering the URL. For example, "http://community.wikia.com/wiki/Thread:1393621?action=purge".