FANDOM


  • Hello everyone, 

    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?

    Many thanks!

      Loading editor
    • 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.

        Loading editor
    • Thanks.

      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.

        Loading editor
    • 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.

        Loading editor
    • it is better to use css instead. here is example template.

        Loading editor
    • That words too but why is it better?

        Loading editor
    • simple, no js involved, u will not lost tooltip content on mercury. script it is overkill in most cases.

        Loading editor
    • @Fngplg
      Hi, so I just copy the content here to create a Tooltips.css page, then make Tooltip template according to the link, am I understood right? 

      Edit: I also found this , it seems to be using span class="advanced-tooltip'', is it a custom one, or can I use it directly?

        Loading editor
    • That example you found uses the script I linked to in #2. So if you want to use a CSS-only approach, it isn't possible.

        Loading editor
    • Andrewds1021#9
      it isn't possible

      it's possible. any wikitext can be here.
      Islandking#8
      Hi, so I just copy the content here to create a Tooltips.css page, then make Tooltip template according to the link, am I understood right?

      if u will not forget to import it, then yes.
      Islandking#8
      I also found this , it seems to be using span class="advanced-tooltip", is it a custom one, or can I use it directly?

      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.

        Loading editor
    • Fngplg wrote:

      Andrewds1021#9
      it isn't possible

      it's possible. any wikitext can be here.

      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.

        Loading editor
    • Fngplg wrote:if u will not forget to import it, then yes.

      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.

        Loading editor
    • arbitrary css will not work unless u import it somehow. i'd recommend to use @import. place it at the top of common.css.

        Loading editor
    • 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.

      Hi,

      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? 

        Loading editor
    • I am not sure what you mean by "shows on the left most" but I am pretty sure there is not way to get CSS to trace the cursor location.

        Loading editor
    • Hi there Andrewds1021,

      Yes that's what I heard.

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

        Loading editor
    • could u provide some links? according to whatlinkshere, there is only tooltip in kirkburn's profile, and it works fine.

        Loading editor
    • Hello Fngplg,

      Sure, see the two yellow colored tooltip texts under the Testing: Toolbox.css header, the box always appear to the left no matter the position of the template.

        Loading editor
    • i've updated the template.

        Loading editor
    • @Fngplg 

      Yes, that solves the "left" and "middle" case, but when texts are to the right, a portion of the box will be blocked:
      Box blocked
        Loading editor
    • yes, it will. that's why template has params to set size and position.

        Loading editor
    • Hi, Fngplg,

      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.

        Loading editor
    • it is bad idea. instead, i suggest to adjust tooltip width.

        Loading editor
    • If that's possible, could you tell me the lines I should change, I can try to compare the results, always left vs. always middle

        Loading editor
    • 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.

        Loading editor
    • 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.

        Loading editor
    • @Fngplg

      1. 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. Could you explain?
      2. Wouldn't it be simpler to use #if instead of #ifeq; then you could get rid of |||?

      @Islandking

      If you want to place the tooltip at the center of the screen, do something like the following.

      .tt1 .tt2-c {
          position: fixed;
          left: calc((100% - 300px) / 2);
          top: 300px;
      }
        Loading editor
    • Hello Andrewds1021,

      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.

        Loading editor
    • Andrewds1021#27
      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.
      Andrewds1021#27
      Wouldn't it be simpler to use #if instead of #ifeq

      sometimes i prefer ifeq, if i do expect some changes.
        Loading editor
    • Hmm, I may express myself wrong, but I don't want the box floating in the center of screen but in middle of the screen just below the line where text belongs.

        Loading editor
    • 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:

      <div class="tt1" style="display:inline-block;">{{{1}}}<div class="tt2-positioner"><div class="tt2 tt2-{{{3|}}}" style="{{#ifeq:{{{4|}}}|||width:{{{4}}};}}{{#ifeq:{{{5|}}}|||height:{{{5}}};}}">{{{2}}}</div></div></div>
      

      I need to give a little more thought into how the CSS will change. I will post again when I have it.

        Loading editor
    • 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.

        Loading editor
    • I see, thanks for trying, Andrewds1021, and Fngplg, thank you both for the patient for help.

      I think I'll need to trace the original "left" solution, not perfect, but it will do, thanks again guys, case closed.

        Loading editor
    • Ok guys, sorry but there're issues:

      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.

      Solutions?

      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.

        Loading editor
    • 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.

      .WikiaArticle,
      .pi-data {
          overflow: visible;
      }

      I haven't seen the image appearance issue.

        Loading editor
    • Yes, placing <noinclude> right behind did work. (Perhaps null edits necessary to see the effect.)

        Loading editor
    • 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".

        Loading editor
    • Should be a menu button …

        Loading editor
    • One would think... Could be added with some JS. Don't ask me how though. I don't yet know enough JS to actually do it.


      Edit:

      If you have pages that need to be purged often, I have this.

        Loading editor
    •   Loading editor
    • Even better!

        Loading editor
    • Yes, no the extra line fixes the line break, but it's still a mystery why the icon doesn't show up in article's toolbox, as both the edit preview and template pages themselves work fine.

      @Andrewds1021

      Should I add the code to common.css, wikia.css or tooltip.css, where (position) should I input them? 

        Loading editor
    • Fngplg wrote:
      PurgeButton

      Works like charm :-)

        Loading editor
    • Based on the age of the wiki, probably Wikia.css.

        Loading editor
    • Andrewds1021 wrote:
      Based on the age of the wiki, probably Wikia.css.

      Working :-)

      And I've sent the pic display issue as a bug report, thanks!

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message