title attribute

F

fulio pen

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
 
S

Stanimir Stamenkov

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%;}

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
 
J

Jukka K. Korpela

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;
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.
 
B

BootNic

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);
border:eek:utset 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+LK4A+Lx5q7LC28ti
+4kAoJDtPmgBI2xg2F0TWMJ7XII4OWqE
=DdJd
-----END PGP SIGNATURE-----
 
D

dorayme

Stanimir Stamenkov said:
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%;}

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)
 
F

fulio pen

Thu, 28 Jul 2011 19:53:40 -0700 (PDT), /fulio pen/:
The given selector matches a <title> element descendant of element
having a 'rec' class, so it won't work.
'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)

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
 
J

Jonathan N. Little

BootNic said:
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);
border:eek:utset 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'
 
B

BootNic

BootNic said:
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);
border:eek:utset 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)

iEYEARECAAYFAk4zHz8ACgkQmo2774GZ7qnA2gCgmk4JN76t0wLj6fn2xNl1fP/I
jYMAn1ZVFUmltEMao7BS9PPGAfar3Yqy
=EjtW
-----END PGP SIGNATURE-----
 
J

Jonathan N. Little

BootNic said:
On Fri, 29 Jul 2011 16:10:57 -0400


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!
 
F

fulio pen

Thu, 28 Jul 2011 19:53:40 -0700 (PDT), /fulio pen/:
The given selector matches a <title> element descendant of element
having a 'rec' class, so it won't work.
'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)

Thank you all for your help.

fulio pen
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top