SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    how to hide default title when using tooltip?

    how to hide default title when using tooltip? Im using css and the code below to show a tooltip. It pulls from the title attribute. But currently both the tooltip and the default title popup. Is the there a way to hide the title but keep the tooltip? Thanks!

    <a class="tooltip" title="Share On Facebook"></a>

    .tooltip{display:inline;position:relative}
    .tooltip:hover{text-decoration:none}
    .tooltip:hover:after{
    background:#111;
    background:rgba(0,0,0,.8);
    border-radius:5px;
    bottom:33px;
    color:#fff;
    content:attr(title);
    display:block;
    left:-50px;
    padding:8px 0;
    position:absolute;
    white-space:nowrap;
    z-index:98;
    width:140px;
    text-align:center;
    }
    .tooltip:hover:before{
    border:solid;
    border-color:#111 transparent;
    border-width:6px 6px 0 6px;
    bottom:27px;
    content:"";
    display:block;
    left:-10px;
    position:absolute;
    z-index:99
    }

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You cannot hide a title, but you can use element.removeAttribute('title') to remove it.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Ya I found plenty of ways to remove it. But in doing so my CSS tooltip pops up empty. I figure this is a no go. I'm just going to put the tip in a span and be done with it.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Thanks. Ya I found plenty of ways to remove it. But in doing so my CSS tooltip pops up empty.
    You would store the existing title in a variable for use by your custom tooltip, remove the title from the element so that the default one doesn't appear, then when your custom tooltip is finished you would put the title back on the element so that things are ready for the next occurance.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You would store the existing title in a variable for use by your custom tooltip, remove the title from the element so that the default one doesn't appear, then when your custom tooltip is finished you would put the title back on the element so that things are ready for the next occurance.
    Could you be so kind as to show me what that would look like? Paul over in the css forum posted a way to auto center the tooltip without a width with either the tiltle or a span technique. http://www.sitepoint.com/forums/show...r-over-element. If we could combine these two fixes, and add css3 transitions, then we have a perfect non-full JS alternative.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Could you be so kind as to show me what that would look like? Paul over in the css forum posted a way to auto center the tooltip without a width with either the tiltle or a span technique. http://www.sitepoint.com/forums/show...r-over-element. If we could combine these two fixes, and add css3 transitions, then we have a perfect non-full JS alternative.
    Sure thing.

    Code javascript:
    function exitHandler = function (el) {
        el.title = cachedTitle;
    };
     
    var cachedTitle = el.title;
    el.title = '';
     
    fancyTooltip({
        target: el,
        title: cachedTitle,
        onExit: exitHandler
    });

    Depending on how your fancy tooltip works, it could be something like that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Cool! Ok here is where I'm at - which is not far. I really have no idea what to do with that? Thanks for any help.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style type="text/css">
    .tooltip{position:relative}
     .tooltip:hover:after{
    	position:absolute;
    	top:20px;
    	left:0;
    	width:150px;
       background:#111;
       background:rgba(0,0,0,.8);
       border-radius:5px;
       color:#fff;
       content:attr(title);
       padding:8px 0;
       white-space:nowrap;
       z-index:98;
    	text-align:center;
      }
      .tooltip:hover:before{
        border:solid;
        border-color:#111 transparent;
        border-width:6px 6px 0 6px;
        bottom:27px;
        content:"";
        left:-10px;
        position:absolute;
        z-index:99
       }
    </style>
    <script type="text/javascript">
    function exitHandler = function (el) {
        el.title = cachedTitle;
    };
     
    var cachedTitle = el.title;
    el.title = '';
     
    .tooltip({
        target: el,
        title: cachedTitle,
        onExit: exitHandler
    });
    </script>
    </head>
    <body>
    
    <a class="tooltip" title="Share With Email">TOOLTIP</a>
    
    </body>
    </html>

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Cool! Ok here is where I'm at - which is not far. I really have no idea what to do with that? Thanks for any help.
    Do you have a scripting library that provides the custom tooltip? If not, then that sample of code won't do anything for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Do you have a scripting library that provides the custom tooltip? If not, then that sample of code won't do anything for you.
    Nope its css. Thats why I need to remove the title. All the js ones on the web remove it as part of the plugin. I have jquery on the page too if that helps

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Nope its css. Thats why I need to remove the title. All the js ones on the web remove it as part of the plugin. I have jquery on the page too if that helps
    Okay, so due to your CSS hover effect doing its thing, I'm not sure if there's any way for scripting to remove the existing tooltip without affecting the CSS that's using it too.

    How about something like this instead? http://sixrevisions.com/css/css-only-tooltips/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ya something like that was my back up. But if someone could figure out how to remove the title (yet css use it) then that would be cleaner. And better on google too. No black hat mistakes.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Ya something like that was my back up. But if someone could figure out how to remove the title (yet css use it) then that would be cleaner. And better on google too. No black hat mistakes.
    If you use the tooltip attribute, then browsers are going to tooltip it for you, regardless of what other CSS stuff that you do.

    From the demo, the technique is to not use the tooltip attribute, but to place the intended text in a hidden span next to the word instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •