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

Custom tooltips for everyone?

Luxus

Well-known member
#1
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?
 

Luxus

Well-known member
#5
Those classes are specified in the javascript:

js/xenforo/xenforo.js

Search for "xenTooltip".

Do you want to style a particular tooltip? Which one?
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.
 

Chris D

XenForo developer
Staff member
#6
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

Well-known member
#8
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 ;)
 

Luxus

Well-known member
#9
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
 

Luxus

Well-known member
#11
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