Nice Titles are here for testing. Let me know if they make your life impossible. I might tweak the CSS a bit, so suggestions for the “aesthetic” side of things are welcome.
Stephanie Booth's online ramblings
Nice Titles are here for testing. Let me know if they make your life impossible. I might tweak the CSS a bit, so suggestions for the “aesthetic” side of things are welcome.
I’m not sure they are really orthodox, but let’s see what happens…
Nul.
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^
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;
}
Oh yeah, when I right-click on a link, its tooltip just freezes until page is reloaded.
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! 🙂
actually, I’m thinking of making them more like “normal” tooltips… *thinks*
I’ve gone for something closer to the “normal” windows look… what do you think? is it
shocking on other platforms?
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.
I just love the round corners!