OK, this may sound like a strange question, but believe me it has a purpose.
Is there any way to keep browsers like Firefox and IE from displaying a tooltip of an element’s title attribute?
I realize that normally part of the whole point in having a title attribute is something like those tooltips, but I have a case where I’m using the title attribute for something and would prefer there be no tooltip.
I’d also prefer to accomplish it without script, but script isn’t out of the question.
I found a method for doing drop shadows using pure CSS, but the CSS included a hardcoded string of the text to apply the shadow to. I wanted to take the content out of the CSS, but it still needed a way to pull the text. So, I added a title attribute to the text (in my case an h1) that duplicated the actual text. It works great, just creates a tooltip whenever you mouseover the title. Not a big deal, but it would be nice to get rid of it. I hadn’t found any way using something like CSS to tell the browser to not do a tooltip; I also thought maybe a script (like an onmouseover) would do the trick. So far I hadn’t found anything, so I posted here.
tooltips are part of the default behaviour of the user agent. it is not your place as web designer to attempt to change the behaviour of the user agent. that’s why css (in its current form) also doesn’t allow you to influence this aspect of the page’s behaviour.
I think we have a slight philosophical difference on this point.
I can understand that CSS doesn’t provide a way, but is there a way using something like client-side scripting? That’s used all the time to affect user agent behavior, and is specifically designed for particular user agents.
Am I missing something here or do you just mean the ALT tags?? If you don’t want it to show up, just don’t provide one in the img tag … though that seems like an obvious answer so I probably am missing something.
Am I missing something here or do you just mean the ALT tags?? If you don’t want it to show up, just don’t provide one in the img tag … though that seems like an obvious answer so I probably am missing something.
No, not alt - this is for textual tags, like h1. I was using the content of the attribute in the CSS via attr(X). CSS doesn’t have a way to access the actual text enclosed by the h1 tags.
This might work, but I’m not sure how to reset the title onmouseout
Thanks for the tip, but it didn’t work. Once the title attribute was removed, the entire h1 disappeared.
However, I ended up trying it with id instead of title and that seems to work much better. It also makes a little more sense in terms of the attribute purposes. You’re also limited by the id attribute being unique, but I don’t think that will be a problem most of the time. In addition, I had used id as the CSS selector, but I found that a class selector works better.
With some further tweaking I was able to make the CSS abstract enough that it can apply to any text element by simply adding “shadow” as a class subclass or subclass. I plan to get an example and the code together; I can post it here if anyone’s interested.
I’m philosophically with theharmonyguy on this one.
If it’s not our place to change the default behaviour of the user agent, then we wouldn’t have been given the means to do so (namely scripting or css).
Surely the entire purpose of css and scripting is to facilitate changes to the default behaviour of UAs.
The css cursor property is a fine example of where we’re permitted control over a fundamental aspects of UA behaviour.
OK, so this isn’t the most elegant HTML, but it works and it validates. By nesting another span within the span that has a title attribute, the child span overrides. To override the original title with nothing (and thus avoiding a tooltip), Firefox requires title=" " rather than title=“” - the latter has no effect. But in IE, title=" " still displays a tooltip with just a space, while title=“” does the trick. By including both and nesting them as shown, Firefox and IE don’t display any tooltip at all.
I was going to post my pure CSS drop shadow code soon after I mentioned it, but I wanted to try and make it cross-browser and ran into lots of problems. Now I’m happy to say that I have a solution which works in Firefox and IE (haven’t tested on other browsers yet - Opera should work but I don’t know about Macs), doesn’t display tooltips, and validates as XHTML 1.1 and CSS! I just finished it today, so I’ll have to get it typed up and posted later.
Is not having a tooltip really so important to a users’ browsing experience that it’s worth mangling the markup to that degree?
I wouldn’t say so.
Though, fwiw… if you have access to the outermost spans in your example, couldn’t you just empty the title=“text” attribute. It would mean you could dump at least one set of span tags.
Still, I can’t see any scenario where removing or subverting the title attribute is worth doing that to the markup.
I imagine you’re being precious about an effect that either isn’t worth chasing after or could be achieved in a more complimentary way.
Also, if you’re using scripting to shadow text, why not just dump the title attribute altogether and copy the text node using the DOM for your shadow? No redundant info, no extra spans; I see nothing but benefits with this approach compared to the title suppression scheme.
Well, the method I was using is total CSS - no script. The only way to feed content to the CSS for the shadow’s text is to use attr(). I can’t use id because of spaces in the text, so title was about the only thing that worked.
I know it’s a small effect, but it’d be nice to not get a tooltip every time you mouseover a large title. And are a few nested span’s really markup that’s overly “mangled”?
The shadow technique works just fine without the nested spans, so if the tooltips aren’t a problem one could still use the shadows.
