1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Custom tooltips for everyone?

Discussion in 'Styling and Customization Questions' started by Luxus, Jun 15, 2012.

  1. Luxus

    Luxus Well-Known Member

    There are tooltips that I see on my site with one class:
    HTML:
    <div class="xenTooltip " ...
    But there also exis tooltips with more than one class, for example here on xenforo.com:
    HTML:
    <div class="xenTooltip social" ...
    I want to make custom tooltips with my own additional class

    HTML:
    <div class="xenTooltip custom" ...
    How do I do that? I guess I have to edit a javascript file?
     
    Shelley likes this.
  2. Luxus

    Luxus Well-Known Member

    I have updated the first post to make myself more clear on what I want to accomplish.
     
  3. Luxus

    Luxus Well-Known Member

    Any help is greatly appreciated.
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Those classes are specified in the javascript:

    js/xenforo/xenforo.js

    Search for "xenTooltip".

    Do you want to style a particular tooltip? Which one?
     
    Shelley and Luxus like this.
  5. Luxus

    Luxus Well-Known Member

    Well I wanted to align these tooltips correctly:
    tt.png
    For some reason they are not in the exact same position in Chrome and Firefox and since they have the same class like any tooltip styling them would affect other tooltips as well. So I wanted an own class for them.
     
  6. Chris D

    Chris D XenForo Developer Staff Member

    You might not need to assign separate classes.

    It's possible to use conditions in HTML to adjust styles on a per browser (and version) basis.

    For example, if I want the thread description and links to be red and pink in Internet Explorer but normal for every other browser, I could add this to my template:

    Code:
    <!--[if IE]>
    <style type="text/css">
    #pageDescription
    {
    color: #ff0000;
    }
     
    #pageDescription.muted a
    {
    color: #FF70AA;
    }
    </style>
    <![endif]-->
    Which basically says if IE then set this style.

    In Chrome it looks like this:

    normal.PNG

    But in IE it looks like this:

    colour.PNG

    So that's an extreme example, but basically it works.
     
    Luxus likes this.
  7. Chris D

    Chris D XenForo Developer Staff Member

    Luxus likes this.
  8. Luxus

    Luxus Well-Known Member

    Thanks, but I'll probably go with the javascript solution. Maintaining browser hacks can be a bit troublesome to work with while javascript should work for every browser, especially since tooltips require javascript in the first place ;)
     
  9. Luxus

    Luxus Well-Known Member

    By the way, here you can see cleary the browser issue:
    I have this image with a tooltip
    HTML:
    <img class="Tooltip" alt="{xen:phrase sticky}" title="{xen:phrase sticky}" src="styles/default/xenforo/icons/sticky.png">
    Look at the different properties.

    Firefox:
    ff_p.png
    Chrome:
    chrome_p.png
    Opera:
    opera_p.png
    IE8:
    ie_p.png
     
  10. James

    James Well-Known Member

    top and left are worked out dynamically using JS to create the offset.
     
  11. Luxus

    Luxus Well-Known Member

    Still the tooltips are visually not in the same position with different browsers.

    Example (O are tooltips, the red - lines tell you where the tooltips should be if everything works as it should):

    Firefox:
    ---O

    Chome:
    -----O

    Opera:
    ---O

    IE8:
    ---O
     

Share This Page