Results 1 to 7 of 7

Thread: Styling a title tag with CSS - nothing seems to be working

  1. #1
    Join Date
    Oct 2012
    Posts
    157
    Thanks
    21
    Thanked 1 Time in 1 Post

    Default Styling a title tag with CSS - nothing seems to be working

    I can't seem to find even a remote solution to this. Those of you who know CSS well, can we style the title attribute inside the anchor tag?

    <a href="http://something.com" title="how are you">something</a>

    Some claim that with CSS3 it's possible, but I can find anything that would work. Anyone?

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    You can't style attributes, since they aren't displayed in the first place. Are you trying to select an element based on its title tag?
    Code:
    [title="how are you"]{ /* styles go here */ }
    Or are you trying to use the value of the title tag (e.g., as a "tooltip")?
    Code:
    a:after{ content: attr(title); }

  3. #3
    Join Date
    Oct 2012
    Posts
    157
    Thanks
    21
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by traq View Post
    You can't style attributes, since they aren't displayed in the first place. Are you trying to select an element based on its title tag?
    Code:
    [title="how are you"]{ /* styles go here */ }
    Or are you trying to use the value of the title tag (e.g., as a "tooltip")?
    Code:
    a:after{ content: attr(title); }
    traq, I want to style it as a title tag, NOT as a tooltip. Do you think it's possible?

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    Huh? A title tag goes in the head section and again is not displayed on the web page - just in the browser tabs and as the clickable link in search results.

    What exactly do you mean?
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by qwikad.com View Post
    traq, I want to style it as a title tag, NOT as a tooltip. Do you think it's possible?
    To clarify, are you are talking about a title attribute, or a <title> element?

    If you're talking about the attribute, no, you can't style it. The is no way to select it (separately from whatever element it is attached to), and it is not visible anyway.

    If you're talking about the element, yes you can style it (though I don't see why you would want to). The <title> element (as well as the <head>) have display:none by default, so you'd need to do:
    Code:
    head{ 
        display:block;
    }
    title{
        display:block;
        /* other styles as desired */
    }
    If I'm missing something, please explain further. It might be helpful if you could give an example.
    Last edited by traq; 10-01-2013 at 07:43 AM.

  6. #6
    Join Date
    Oct 2012
    Posts
    157
    Thanks
    21
    Thanked 1 Time in 1 Post

    Default

    Sorry, I did confuse a title tag with a title attribute. I never really had a formal CSS training. Just learned a bunch of things by trial and error.

    I've found something that seems to be working. I will just post it here if others happen to be asking the same question.

    HTML:

    Code:
    <a href="#" class="tip" tooltip="This is the CSS tooltip">Link</a>
    CSS:

    Code:
    a.tip {
      color: #900;
      text-decoration: none;
    }
    
    a.tip:hover {
      color: red;
      position: relative;
    }
    
    a.tip:hover:after {
      content: attr(tooltip);
      padding: 4px 8px;
      color: #333;
      position: absolute;
      left: 0;
      top: 100%;
      white-space: nowrap;
      z-index: 20px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: 0px 0px 4px #222;
      -webkit-box-shadow: 0px 0px 4px #222;
      box-shadow: 0px 0px 4px #222;
      background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
      background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
      background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
      background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
      background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
    }

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    Chris Coyer @ CSS-Tricks posted an article that included similar tooltip CSS - I'll post it here for other folks reference as there is also the following information;
    However, do note that browsers have their own tooltip popups... When that comes up, it will cover this, and look weird... There is no way to suppress this, other than just not using the title attribute.
    So you still get the default grey browser-generated tooltip overlapping the secondary styled tooltip, which might not leave the best impression on visitors.

    Reference article: http://css-tricks.com/css-content/ (see the "Example Trick: CSS3 tooltips" heading)
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Resolved :last-child styling not working
    By tua33450 in forum CSS
    Replies: 2
    Last Post: 12-06-2011, 04:56 PM
  2. Replies: 2
    Last Post: 03-23-2011, 07:52 PM
  3. Resolved Styling the title in Thumbnail Image Viewer
    By kiwibrit in forum JavaScript
    Replies: 2
    Last Post: 05-11-2010, 05:04 PM
  4. <title></title> location
    By afe in forum HTML
    Replies: 36
    Last Post: 01-09-2008, 01:32 AM
  5. <title></title> in header
    By dz67 in forum ASP
    Replies: 8
    Last Post: 01-08-2008, 01:57 PM

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
  •