title attribute

Discussion in 'HTML' started by fulio pen, Jul 29, 2011.

  1. fulio pen

    fulio pen Guest

    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
    fulio pen, Jul 29, 2011
    #1
    1. Advertising

  2. 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
    Stanimir Stamenkov, Jul 29, 2011
    #2
    1. Advertising

  3. 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;
    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/
    Jukka K. Korpela, Jul 29, 2011
    #3
  4. fulio pen

    BootNic Guest

    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);
    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-----
    BootNic, Jul 29, 2011
    #4
  5. fulio pen

    dorayme Guest

    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
    dorayme, Jul 29, 2011
    #5
  6. fulio pen

    fulio pen Guest

    On Jul 29, 3:53 am, dorayme <> wrote:
    > In article <j0tfp0$>,
    >  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


    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
    fulio pen, Jul 29, 2011
    #6
  7. 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);
    > 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'

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jul 29, 2011
    #7
  8. fulio pen

    BootNic Guest

    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);
    >> 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-----
    BootNic, Jul 29, 2011
    #8
  9. 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
    Jonathan N. Little, Jul 29, 2011
    #9
  10. fulio pen

    fulio pen Guest

    On Jul 29, 3:53 am, dorayme <> wrote:
    > In article <j0tfp0$>,
    >  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


    Thank you all for your help.

    fulio pen
    fulio pen, Jul 30, 2011
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andreas Klemt
    Replies:
    1
    Views:
    437
    Steve C. Orr, MCSD
    Aug 10, 2003
  2. Replies:
    0
    Views:
    502
  3. Replies:
    1
    Views:
    521
    David
    Apr 24, 2007
  4. rote
    Replies:
    5
    Views:
    904
  5. soonic
    Replies:
    11
    Views:
    1,758
    soonic
    Jul 27, 2011
Loading...

Share This Page