«

hello,

I have following code:

<span class='rec' title='abc'>xyz</span>

On the web page, when moving the cursor to 'xyz', 'abc' would appear
in a small rectangle. What I like to do is to have a larger rectangle
and abc. I tried following css code:

..rec title {font-size:200%;}

But it is not working. I wonder whether it is possible to achieve the
desired effect.

Thanks for your expertise.

fulio pen

Thu, 28 Jul 2011 19:53:40 -0700 (PDT), /fulio pen/:

> I have following code:
>
> <span class='rec' title='abc'>xyz</span>
>
> On the web page, when moving the cursor to 'xyz', 'abc' would appear
> in a small rectangle. What I like to do is to have a larger rectangle
> and abc. I tried following css code:
>
> .rec title {font-size:200%;}

The given selector matches a <title> element descendant of element
having a 'rec' class, so it won't work.

> But it is not working. I wonder whether it is possible to achieve the
> desired effect.

'title' attributes content is usually rendered using system
tool-tips. There's no standard way to style these using CSS. I've
seen suggested [1] the following form:

<style>
.rec { position: relative; }
.tip { display: none; }
.rec:hover > .tip {
position: absolute;
display: block;
font-size: 200%;
top: 0.5em;
left: 0;
}
</style>

<span class="rec">
<span class="tip">abc</span>
xyz
</span>

This is not content-wise as styling is optional and when not applied
could result in confusing, the least, content. One may employ
scripting which dynamically generates tips [2] from 'title'
attributes content, which could be further styled with CSS. When
scripting is not available - the 'title' content will be rendered in
a standard manner.

[1] http://loadaveragezero.com/vnav/labs/CSS/tooltips.php
[2] http://www.google.com/search?q=custom+tool+tips

--
Stanimir

29.07.2011 05:53, fulio pen wrote:

> I have following code:
>
> <span class='rec' title='abc'>xyz</span>
>
> On the web page, when moving the cursor to 'xyz', 'abc' would appear
> in a small rectangle.

On most graphical browsers, yes. Speech-based user agents may speak out
the title attribute value, at least depending on settings and user commands.

However, what are the odds that the user moves the pointer*) over "xyz"?
There is by default no indication or hint of something showing
additional information when you move the pointer over it. If the word
were a link, things were different. But for a <span>, you would in
practice need to give users explicit verbal explanations about the
feature or use some styling that suggests the same.

*) It's really "pointer", not "cursor". The cursor is a different
object, typically a thin vertical bar, indicating the current writing
position e.g. inside a form field.

> What I like to do is to have a larger rectangle
> and abc.

You can't, as an author. The visual appearance of the "tooltip text" is
browser-dependent. It may be affected by _user_ settings - on Windows,
there are things you can do with them via the Control Panel, though few
people know about this.

> I tried following css code:
>
> .rec title {font-size:200%;}

The selector refers to title _elements_ appearing inside an element in
class 'rec', and this is not about title elements at all.

What you can do is to simulate "tooltips" with CSS and JavaScript. It
gets a bit difficult though, if you wish to do things robustly.

Here's one approach, minimally tested, may have loads of pitfalls but
illustrates an idea:

Use markup like the one you describe, but use JavaScipt to change the
title attribute's value into a parenthetic expression after the elements
existing content, hidden via CSS. Add CSS code to turn make the
expression (without the parentheses) visible, in a box positioned below
the element's content.

Sample JavaScript code (to be placed e.g. inside a script element right
before the end of the body eelment:

if(document.getElementsByClassName) {
var rec = document.getElementsByClassName('rec');
for(var i = 0; i < rec.length; i++) {
var elem = rec[i];
elem.innerHTML += '<span class=par>(<'+'/span><span class=tip>' +
elem.title + '</'+'span><span class=par>)</'+'span>';
elem.title = '';
}
}

(Not all JavaScript-enabled browsers support getElementsByClassName. The
code above is just a simple approach, letting non-supporting browsers
just do what they do by default. You might use more complicated code to
cover all JS-enabled browsers, or simple jQuery code.)

Sample CSS for use in conjunction with the JavaScript above:

..par, .tip { display: none; }
..rec { position: relative; }
..rec:hover .tip { display: inline; background: #ffd; color: black;
position: absolute; top: 1.3em; left: 0; padding: 0.1em 0.2em;
border: solid 1px #333; }

This doesn't really set the font at all, but you can add font settings
you like. There might be no need for them, though, since the default
rendering uses the same font as for normal content in the element, not
the tiny odd font that browsers use in their tooltips.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

On Thu, 28 Jul 2011 19:53:40 -0700 (PDT)
fulio pen <> wrote:

> hello,
>
> I have following code:
>
> <span class='rec' title='abc'>xyz</span>
>
> On the web page, when moving the cursor to 'xyz', 'abc' would
> appear in a small rectangle. What I like to do is to have a
> larger rectangle and abc.

[snip]

HTML5

[data-tootip]:hover{
position:relative;
}
[data-tootip]:hover:before {
font-size:2em;
content:attr(data-tootip);
position:absolute;
color:rgb(0,0,0);
background-color:rgba(200,200,200,0.5);
borderutset rgba(0,0,0,0.2) 0.1em;
padding:0.1em;
border-radius: 0.5em;
text-shadow: rgba(0,0,0,0.2) 2px 2px 1px;
}

<span class='rec' data-tootip='abc'>xyz</span>


--
BootNic Fri Jul 29, 2011 03:47 am
The human mind treats a new idea the same way the body treats a strange
protein; it rejects it.
*P. B. Medawar*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAk4yZYgACgkQmo2774GZ7qkCXwCfdcayDJE+LK 4A+Lx5q7LC28ti
+4kAoJDtPmgBI2xg2F0TWMJ7XII4OWqE
=DdJd
-----END PGP SIGNATURE-----

In article <j0tfp0$eon$>,
Stanimir Stamenkov <> wrote:

> Thu, 28 Jul 2011 19:53:40 -0700 (PDT), /fulio pen/:
>
> > I have following code:
> >
> > <span class='rec' title='abc'>xyz</span>
> >
> > On the web page, when moving the cursor to 'xyz', 'abc' would appear
> > in a small rectangle. What I like to do is to have a larger rectangle
> > and abc. I tried following css code:
> >
> > .rec title {font-size:200%;}
>
> The given selector matches a <title> element descendant of element
> having a 'rec' class, so it won't work.
>
> > But it is not working. I wonder whether it is possible to achieve the
> > desired effect.
>
> 'title' attributes content is usually rendered using system
> tool-tips. There's no standard way to style these using CSS. I've
> seen suggested [1] the following form:
>
> <style>
> .rec { position: relative; }
> .tip { display: none; }
> .rec:hover > .tip {
> position: absolute;
> display: block;
> font-size: 200%;
> top: 0.5em;
> left: 0;
> }
> </style>
>
> <span class="rec">
> <span class="tip">abc</span>
> xyz
> </span>
>
> This is not content-wise as styling is optional and when not applied
> could result in confusing, the least, content.

One source of confusion could be eliminated by adding to
..rec:hover > .tip something like

color: black;
background: yellow;
padding: .1em;

to avoid the default transparency (that would result in text
lying behind interfering)

--
dorayme

On Jul 29, 3:53*am, dorayme <dora...@optusnet.com.au> wrote:
> In article <j0tfp0$eo...@dont-email.me>,
> *Stanimir Stamenkov <s7a...@netscape.net> wrote:
>
>
>
>
>
>
>
>
>
> > Thu, 28 Jul 2011 19:53:40 -0700 (PDT), /fulio pen/:
>
> > > I have following code:
>
> > > <span class='rec' title='abc'>xyz</span>
>
> > > On the web page, when moving the cursor to 'xyz', 'abc' would appear
> > > in a small rectangle. What I like to do is to have a larger rectangle
> > > and abc. I tried following css code:
>
> > > .rec title {font-size:200%;}
>
> > The given selector matches a <title> element descendant of element
> > having a 'rec' class, so it won't work.
>
> > > But it is not working. *I wonder whether it is possible to achieve the
> > > desired effect.
>
> > 'title' attributes content is usually rendered using system
> > tool-tips. *There's no standard way to style these using CSS. *I've
> > seen suggested [1] the following form:
>
> > <style>
> > * *.rec { position: relative; }
> > * *.tip { display: none; }
> > * *.rec:hover > .tip {
> > * * *position: absolute;
> > * * *display: block;
> > * * *font-size: 200%;
> > * * *top: 0.5em;
> > * * *left: 0;
> > * *}
> > </style>
>
> > <span class="rec">
> > * *<span class="tip">abc</span>
> > * *xyz
> > </span>
>
> > This is not content-wise as styling is optional and when not applied
> > could result in confusing, the least, content. *
>
> One source of confusion could be eliminated by adding to
> .rec:hover > .tip something like
>
> color: black;
> background: yellow;
> padding: .1em;
>
> to avoid the default transparency (that would result in text
> lying behind interfering)
>
> --
> dorayme

Thank you all for your expertise and help. I will read all the
responses carefully, and may have more questions later. Thanks again.

fulio pen

BootNic wrote:
> HTML5
>
> [data-tootip]:hover{
> position:relative;
> }
> [data-tootip]:hover:before {
> font-size:2em;
> content:attr(data-tootip);
> position:absolute;
> color:rgb(0,0,0);
> background-color:rgba(200,200,200,0.5);
> borderutset rgba(0,0,0,0.2) 0.1em;
> padding:0.1em;
> border-radius: 0.5em;
> text-shadow: rgba(0,0,0,0.2) 2px 2px 1px;
> }
>
> <span class='rec' data-tootip='abc'>xyz</span>


What I find puzzling is that your example works even though the
parameter is 'data-tooltip'

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On Fri, 29 Jul 2011 16:10:57 -0400
"Jonathan N. Little" <> wrote:

> BootNic wrote:
>> HTML5
>>
>> [data-tootip]:hover{
>> position:relative;
>> }
>> [data-tootip]:hover:before {
>> font-size:2em;
>> content:attr(data-tootip);
>> position:absolute;
>> color:rgb(0,0,0);
>> background-color:rgba(200,200,200,0.5);
>> borderutset rgba(0,0,0,0.2) 0.1em;
>> padding:0.1em;
>> border-radius: 0.5em;
>> text-shadow: rgba(0,0,0,0.2) 2px 2px 1px;
>> }
>>
>> <span class='rec' data-tootip='abc'>xyz</span>
>
> What I find puzzling is that your example works even though the
> parameter is 'data-tooltip'

no l in my example

HTML5 custom data attribute

data-*

Should work with any attribute … replace data-tootip with an attribute of your
choice. Presume css used in the example is supported.

Mayhaps work with fictional attributes as well, just wont be valid, tis whyI
chose html5, to make use of the custom attribute.

--
BootNic Fri Jul 29, 2011 04:59 pm
A well-developed sense of humor is the pole that adds balance to your step as
you walk the tightrope of life
*William Arthur Ward*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAk4zHz8ACgkQmo2774GZ7qnA2gCgmk4JN76t0w Lj6fn2xNl1fP/I
jYMAn1ZVFUmltEMao7BS9PPGAfar3Yqy
=EjtW
-----END PGP SIGNATURE-----

BootNic wrote:
> On Fri, 29 Jul 2011 16:10:57 -0400
> "Jonathan N. Little"<> wrote:


>> What I find puzzling is that your example works even though the
>> parameter is 'data-tooltip'
>
> no l in my example
>
> HTML5 custom data attribute
>
> data-*
>
> Should work with any attribute … replace data-tootip with an attribute of your
> choice. Presume css used in the example is supported.
>
> Mayhaps work with fictional attributes as well, just wont be valid, tis why I
> chose html5, to make use of the custom attribute.
>

Oh I see, I missing one reference when I tried data-foo!
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On Jul 29, 3:53*am, dorayme <dora...@optusnet.com.au> wrote:
> In article <j0tfp0$eo...@dont-email.me>,
> *Stanimir Stamenkov <s7a...@netscape.net> wrote:
>
>
>
>
>
>
>
>
>
> > Thu, 28 Jul 2011 19:53:40 -0700 (PDT), /fulio pen/:
>
> > > I have following code:
>
> > > <span class='rec' title='abc'>xyz</span>
>
> > > On the web page, when moving the cursor to 'xyz', 'abc' would appear
> > > in a small rectangle. What I like to do is to have a larger rectangle
> > > and abc. I tried following css code:
>
> > > .rec title {font-size:200%;}
>
> > The given selector matches a <title> element descendant of element
> > having a 'rec' class, so it won't work.
>
> > > But it is not working. *I wonder whether it is possible to achieve the
> > > desired effect.
>
> > 'title' attributes content is usually rendered using system
> > tool-tips. *There's no standard way to style these using CSS. *I've
> > seen suggested [1] the following form:
>
> > <style>
> > * *.rec { position: relative; }
> > * *.tip { display: none; }
> > * *.rec:hover > .tip {
> > * * *position: absolute;
> > * * *display: block;
> > * * *font-size: 200%;
> > * * *top: 0.5em;
> > * * *left: 0;
> > * *}
> > </style>
>
> > <span class="rec">
> > * *<span class="tip">abc</span>
> > * *xyz
> > </span>
>
> > This is not content-wise as styling is optional and when not applied
> > could result in confusing, the least, content. *
>
> One source of confusion could be eliminated by adding to
> .rec:hover > .tip something like
>
> color: black;
> background: yellow;
> padding: .1em;
>
> to avoid the default transparency (that would result in text
> lying behind interfering)
>
> --
> dorayme

Thank you all for your help.

fulio pen