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.