20 Responses to Nice Titles Here!

  1. Stephanie says:

    I’m not sure they are really orthodox, but let’s see what happens…

  2. Grtrzs says:

    Nul.

  3. Delf says:

    Arg. When I do a mouse gesture on a link to open it in a new window, the “nice title” doesn’t disappear, and I have to reload the page to be able to read what’s written underneath… Weird. I won’t do any mouse gesture here then…

    It looks like what I’m using on my blog for some of my links, but I don’t use any javascript, only css. I’ll try to steal some ideas to improve my own code! ^o^

  4. Sam says:

    Very interesting, actually. The good : – finally a tooltip where you get to see the text in its entirety! Display of the URL in the same box is a valuable bonus; – the cool looks allowed by CSS. Makes you feel like you own a Mac!

    The bad : – tooltips for your right nav bar show up on the left of the screen – Some ‘backlinks’ links tooltips show URL+URL… Well, that’s not bad per se, that’s just not neat. lol – usefulness of semi-transparent PNG is questionable: so it’s “cool”, but transparency doesn’t work in IE, AND the pic hides the rounded corners in Mozilla. Moreover, semi-transparency noticeably impedes legibility. So I suggest your use regular GIF background, or maybe just my quick, image-less proposal. Tweaks include colors closer to your scheme, and relative font sizes.

    div.nicetitle { position: absolute; padding: 0.5em; top: 0px; left: 0px; color: #666; font-size: 0.7em; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; width: 25em; background: #EEE; border-top: 1px solid #DDD; border-left: 1px solid #DDD; border-bottom: 1px solid #AAA; border-right: 1px solid #AAA;

     /* Mozilla proprietary */
    -moz-border-radius: 7px;
    

    } div.nicetitle p { margin: 0; padding: 0 3px; } div.nicetitle p.destination { font-size: 0.9em; text-align: left; padding-top: 0.3em; font-weight: bold; color: #666; }

  5. Sam says:

    Oh yeah, when I right-click on a link, its tooltip just freezes until page is reloaded.

  6. Steph says:

    I’ve told Stuart about the “stickytitles” problem, he’s looking into it.

    I like your aesthetic tweaks, though I boosted up the font size a bit.

    For pompage, what I saw looked good. I’ll try to have a closer look this evening, but “no news is good news” in this case, just keep on at it! :-)

  7. Steph says:

    actually, I’m thinking of making them more like “normal” tooltips… thinks

  8. Steph says:

    I’ve gone for something closer to the “normal” windows look… what do you think? is it shocking on other platforms?

  9. Sam says:

    Well it is shocking, because of all the possibilities implied by CSS, you chose to make the tooltip ressemble Good Old Basic Windows! lol But maybe it’s just me, I’m so fed up with that boring yellow background.

  10. Delf says:

    I just love the round corners!

  11. Stephanie says:

    I'm not sure they are really orthodox, but let's see what happens…

  12. Grtrzs says:

    Nul.

  13. Delf says:

    Arg. When I do a mouse gesture on a link to open it in a new window, the “nice title” doesn't
    disappear, and I have to reload the page to be able to read what's written underneath…
    Weird. I won't do any mouse gesture here then…

    It looks like what I'm using on my blog for some of my links, but I don't use any javascript,
    only css. I'll try to steal some ideas to improve my own code! ^o^

  14. Sam says:

    Very interesting, actually. The good :
    – finally a tooltip where you get to see the text in its entirety! Display of the URL in the
    same box is a valuable bonus;
    – the cool looks allowed by CSS. Makes you feel like you own a Mac!

    The bad :
    – tooltips for your right nav bar show up on the left of the screen
    – Some 'backlinks' links tooltips show URL+URL… Well, that's not bad per se, that's just
    not neat. lol
    – usefulness of semi-transparent PNG is questionable: so it's “cool”, but transparency
    doesn't work in IE, AND the pic hides the rounded corners in Mozilla. Moreover,
    semi-transparency noticeably impedes legibility. So I suggest your use regular GIF background,
    or maybe just my quick, image-less proposal. Tweaks include colors closer to your scheme, and
    relative font sizes.

    div.nicetitle {
    position: absolute;
    padding: 0.5em;
    top: 0px;
    left: 0px;
    color: #666;
    font-size: 0.7em;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-weight: normal;
    width: 25em;
    background: #EEE;
    border-top: 1px solid #DDD;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #AAA;
    border-right: 1px solid #AAA;

    /* Mozilla proprietary */
    -moz-border-radius: 7px;
    }
    div.nicetitle p {
    margin: 0; padding: 0 3px;
    }
    div.nicetitle p.destination {
    font-size: 0.9em;
    text-align: left;
    padding-top: 0.3em;
    font-weight: bold;
    color: #666;
    }

  15. Sam says:

    Oh yeah, when I right-click on a link, its tooltip just freezes until page is reloaded.

  16. Steph says:

    I've told Stuart about the “stickytitles” problem, he's looking into it.

    I like your aesthetic tweaks, though I boosted up the font size a bit.

    For pompage, what I saw looked good. I'll try to have a closer look this evening, but “no news
    is good news” in this case, just keep on at it! :-)

  17. Steph says:

    actually, I'm thinking of making them more like “normal” tooltips… thinks

  18. Steph says:

    I've gone for something closer to the “normal” windows look… what do you think? is it
    shocking on other platforms?

  19. Sam says:

    Well it is shocking, because of all the possibilities implied by CSS, you chose to make the
    tooltip ressemble Good Old Basic Windows! lol But maybe it's just me, I'm so fed up with that
    boring yellow background.

  20. Delf says:

    I just love the round corners!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>