Can I customize the in-browser tool tip bubble?

Question

Is their a way to customize the way the tool tip bubbles look like, cross browser?

For example, when I hover over a tag that has a title attribute, Firefox displays a tool tip bubble. I'd like to customize that to look just like the rest of the site.

Is there a CSS3 hack into that? And if not, can I replace it with something that will work automatically on all the elements with a title attribute?

<a href="" title="This is a nice link, click here"/> <div onclick="" title="A nice action button"/>

Image example:

I'm working real hard on getting my site good looking and ready for service. One of things I noticed was the tooltip breaks my style, just a little... but I'm nuts about those kinds of stuff. Yes I'm still working on it - http://pagelook.us. Huge work in process. Hover over any of the navigation buttons for an active example.

Solution 1

I just wanted to point out that the tooltip displayed for titles is usually the one built into the operating system, and the browser doesn't provide a CSS interface to override the operating system defaults.

Often, the browser doesn't even modify the behaviour of that look and feel for itself.

Solution 2

There is nothing on CSS that can be used to customize a tooltip. You'll have to use Javascript or any other JS framework to reach that. Currently, there are hundreds of different jQuery and Mootools snippets out there that you can download for free and customize at your own needs.

Comments

[JustinKaz]

Thank you, but I'm attempting to limit the amount of javascript being loaded, adding another framework would add to my problems. I want the interface to load quickly so users can dive right into the sweet stuff. But with all the ajax going around... I'll have to add this to the list of possible changes... lol. Thanks.

[Joe Dargie]

@Justin: sure, understandable. If you’re already using another JavaScript framework, I’m sure it can provide similar functionality. And for simple tooltips, ChristopheCVB’s suggestion is worth trying.

[JustinKaz]

Nop! I'm trying to use all my own javascript for easy access, coding standards, and so I can control whats being used (etc...) . The web service is quite sophisticated, even if it appears to be unfinished (that's because it is, lol).

[Joe Dargie]

@Justin: ah sure. In that case, ChristopheCVB’s idea is probably a good starting point.

[Jared]

Should display some of that code in the answer itself. You also don't explain what is actually going on and why you should do this, if at all. A better answer would be "it's not possible" THEN explain an alternative.

[Jérôme MEVEL]

I disagree with that. The tooltip's width and wrapping behavior are different depending of the browser. Try this JsFiddle with IE, Firefox, Chrome and even Edge...

[Jordan]

You'll notice I wrote this answer back in 2011, when Chrome didn't exist. Even if the first part of the sentence is no longer true, the 2nd and overall point are still the same.

[Jérôme MEVEL]

Ho yeah I didn't pay attention to the date sorry. However the first stable version of Chrome was launched in 2008...