SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Preventing ToolTip of title attribute

    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.

    Any ideas?

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    What are you using the title for, if not to display extra information?

  3. #3
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    redux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  5. #5
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Personal Portfolio
    Paul O'B is the CSS god

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by theharmonyguy
    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.
    This might work, but I'm not sure how to reset the title onmouseout:
    HTML Code:
    <a title="my title" href="/" onmouseover="this.setAttribute('title', '');">link</a>

  8. #8
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure I wouldn't mind taking a look ...
    Personal Portfolio
    Paul O'B is the CSS god

  10. #10
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:



    Quote Originally Posted by redux
    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.
    Ours is not to reason why, Redux?

    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.


    Just my 2.

    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  11. #11
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I finally figured out a way to prevent the tooltips!

    HTML Code:
    <span class="shadow" title="text"><span title=" "><span title="">text</span></span></span>
    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.

  12. #12
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    e.g.
    HTML Code:
     <span class="shadow" title=" "><span title="">text</span></span>
    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.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Egh! a null title attribute are we living in a visual browser only box.

  14. #14
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.

  15. #15
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •