Hover/Mouseover CSS/html question.

August 20, 2010 2:20 PM

Can I change the mouseover qualities (the way mouseover/hover text is displayed) with CSS?

I have links and anchors on my websites.

I add the appropriate titles so folks know where they are going or what will happen.

But on mouseover, all you get is a text-box-line with a mustard background and black lettering. This looks terrible.

Can I change this with CSS? I would like it to be less ugly.

Thanks!

posted by Tchad to Computers & Internet (6 answers total)

Nope, not the browser-level one.

Alternately you could create your own with JavaScript, which you could then manipulate to your liking.
posted by hijinx at 2:27 PM on August 20, 2010

Best answer: Yep, it can be done. Unfortunately it doesn't use the title attribute, but a customised span. As far as I am aware, the appearence of the standard "tooltip" can't be changed via CSS. There is more complex JavaScript + CSS that can work solely from the title attribute.
posted by Bora Horza Gobuchul at 2:29 PM on August 20, 2010 [1 favorite]

But on mouseover, all you get is a text-box-line with a mustard background and black lettering. This looks terrible.

This depends on your browser/OS/theme. I see non-ugly white on black, with a pleasant drop shadow. Some sites use Javascript to provide custom styled tooltips, but they are usually annoying.
posted by domnit at 2:35 PM on August 20, 2010

Use the Google to find 'jquery tooltips' - that'll do it.
posted by MTCreations at 2:48 PM on August 20, 2010

This is a great demo which takes the title tag and repurposes it to makes it pretty, while not actually hiding junk on the page that is not really part of the flow of your text.
posted by artlung at 2:52 PM on August 20, 2010

Response by poster: Thanks, guys.

I thought it would have been something like:
hover title: {background rgb(180 180 185)}
But when that didn't work (duh) I came here.

I knew javascript could do it, I just thought there was something a little more direct. It seems like there would have been, but I couldn't find it referenced anywhere. Now that I know it is browser-based, that makes more sense - and I can change the setting on my browser. Wonderful.

Thanks so much! I am off to crack open my w3 javascript/ajax books. You guys are great.
posted by Tchad at 2:54 PM on August 20, 2010