Custom tooltips for everyone?

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

But in IE it looks like this:

colour.webp

So that's an extreme example, but basically it works.
 
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 ;)
 
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.webp
Chrome:
chrome_p.webp
Opera:
opera_p.webp
IE8:
ie_p.webp
 
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
 
Top Bottom