Format href title

Discussion in 'HTML' started by Brian Cryer, Oct 5, 2005.

  1. Brian Cryer

    Brian Cryer Guest

    I want to show extra information about a link and am doing this by placing a
    short narrative in the title attribute of an <a href... link. This works
    fine in Internet Explorer (and I'm hoping in other browsers - I know I
    should have checked but I've not done so yet), IE shows a tool-tip style box
    when I hover the mouse over the link. My question is whether it is possible
    to apply any formatting to this? what I'm really after is a line break, but
    if I put a <br> it comes out as part of the title.

    Any ideas would be appreciated. So too would be the knowledge that it can't
    be done (if it can't be done).

    Thanks in advance.
    --
    Brian Cryer
    www.cryer.co.uk/brian
     
    Brian Cryer, Oct 5, 2005
    #1
    1. Advertising

  2. Brian Cryer

    rf Guest

    Brian Cryer wrote:

    [title attribute]

    > Any ideas would be appreciated. So too would be the knowledge that it can't
    > be done (if it can't be done).


    It can't be done. Not reliably.

    In any case if the title text is so long as to need line breaks it is no
    longer title text but content and should be on the page, not in a title
    attribute.

    --
    Cheers
    Richard
     
    rf, Oct 5, 2005
    #2
    1. Advertising

  3. Brian Cryer

    Brian Cryer Guest

    "rf" <> wrote in message
    news:1bhoj3e5x0hli.nhlueqd0r71h$...
    > Brian Cryer wrote:
    >
    > [title attribute]
    >
    >> Any ideas would be appreciated. So too would be the knowledge that it
    >> can't
    >> be done (if it can't be done).

    >
    > It can't be done. Not reliably.
    >
    > In any case if the title text is so long as to need line breaks it is no
    > longer title text but content and should be on the page, not in a title
    > attribute.
    >
    > --
    > Cheers
    > Richard


    Thanks Richard.

    --
    Brian Cryer
    www.cryer.co.uk/brian
     
    Brian Cryer, Oct 5, 2005
    #3
  4. Brian Cryer

    Arne Guest

    Once upon a time *Brian Cryer* wrote:
    > I want to show extra information about a link and am doing this by placing a
    > short narrative in the title attribute of an <a href... link. This works
    > fine in Internet Explorer (and I'm hoping in other browsers - I know I
    > should have checked but I've not done so yet), IE shows a tool-tip style box
    > when I hover the mouse over the link. My question is whether it is possible
    > to apply any formatting to this? what I'm really after is a line break, but
    > if I put a <br> it comes out as part of the title.
    >
    > Any ideas would be appreciated. So too would be the knowledge that it can't
    > be done (if it can't be done).


    You could try to use the same technic as is used here with pure CSS:
    http://www.meyerweb.com/eric/css/edge/popups/demo.html

    --
    /Arne
    Now killing all posts originating at GoogleGroups
    Workaround: http://www.safalra.com/special/googlegroupsreply/
    -------------------------------------------------------------
     
    Arne, Oct 5, 2005
    #4
  5. Brian Cryer wrote:

    > I want to show extra information about a link and am doing this by placing a
    > short narrative in the title attribute of an <a href... link. This works
    > fine in Internet Explorer (and I'm hoping in other browsers - I know I
    > should have checked but I've not done so yet), IE shows a tool-tip style box
    > when I hover the mouse over the link. My question is whether it is possible
    > to apply any formatting to this? what I'm really after is a line break, but
    > if I put a <br> it comes out as part of the title.
    >
    > Any ideas would be appreciated. So too would be the knowledge that it can't
    > be done (if it can't be done).


    You cannot format the tooltip created by the title attribute, and if you
    get your title text too long some (maybe all) UA's will truncate the text

    There are JavaScript tooltips, but of course require JavaScript to be
    enabled

    You can use CSS

    A .tip { display: none; }
    A:hover .tip {display: inline; }
    ..tip DIV {
    border: 1px solid black;
    color: black;
    background-color: #ffd;
    font-size: 80%;
    width: 15em;
    padding: .2em;
    }

    <a href="#">Lorem ipsum
    <span class="tip">
    <div>
    Lorem ipsum dolor sit amet, consectetuer ...
    </div>
    </span>
    </a>

    This will cause your text to reflow, I think I have see some examples
    with position : absolute but lining up the div will be tricky...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 5, 2005
    #5
  6. Brian Cryer

    Andy Dingley Guest

    Brian Cryer wrote:
    > I want to show extra information about a link and am doing this by placing a
    > short narrative in the title attribute of an <a href... link.


    Stick it in a <span> instead (inside the <a>...</a>), hide it by
    default and use some CSS to make it behave however you want.
     
    Andy Dingley, Oct 5, 2005
    #6
  7. Jonathan N. Little wrote:

    > Brian Cryer wrote:
    >
    >> I want to show extra information about a link and am doing this by
    >> placing a short narrative in the title attribute of an <a href...
    >> link. This works fine in Internet Explorer (and I'm hoping in other
    >> browsers - I know I should have checked but I've not done so yet), IE
    >> shows a tool-tip style box when I hover the mouse over the link. My
    >> question is whether it is possible to apply any formatting to this?
    >> what I'm really after is a line break, but if I put a <br> it comes
    >> out as part of the title.
    >>
    >> Any ideas would be appreciated. So too would be the knowledge that it
    >> can't be done (if it can't be done).

    >
    >
    > You cannot format the tooltip created by the title attribute, and if you
    > get your title text too long some (maybe all) UA's will truncate the text
    >
    > There are JavaScript tooltips, but of course require JavaScript to be
    > enabled
    >
    > You can use CSS
    >
    > A .tip { display: none; }
    > A:hover .tip {display: inline; }
    > .tip DIV {
    > border: 1px solid black;
    > color: black;
    > background-color: #ffd;
    > font-size: 80%;
    > width: 15em;
    > padding: .2em;
    > }
    >
    > <a href="#">Lorem ipsum
    > <span class="tip">
    > <div>
    > Lorem ipsum dolor sit amet, consectetuer ...
    > </div>
    > </span>
    > </a>
    >
    > This will cause your text to reflow, I think I have see some examples
    > with position : absolute but lining up the div will be tricky...
    >

    This might be what you are looking for:

    Pure CSS Tooltips
    http://psacake.com/web/jl.asp

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 5, 2005
    #7
  8. Brian Cryer

    Neredbojias Guest

    With neither quill nor qualm, Jonathan N. Little quothed:

    > Brian Cryer wrote:
    >
    > > I want to show extra information about a link and am doing this by placing a
    > > short narrative in the title attribute of an <a href... link. This works
    > > fine in Internet Explorer (and I'm hoping in other browsers - I know I
    > > should have checked but I've not done so yet), IE shows a tool-tip style box
    > > when I hover the mouse over the link. My question is whether it is possible
    > > to apply any formatting to this? what I'm really after is a line break, but
    > > if I put a <br> it comes out as part of the title.
    > >
    > > Any ideas would be appreciated. So too would be the knowledge that it can't
    > > be done (if it can't be done).

    >
    > You cannot format the tooltip created by the title attribute, and if you
    > get your title text too long some (maybe all) UA's will truncate the text
    >
    > There are JavaScript tooltips, but of course require JavaScript to be
    > enabled
    >
    > You can use CSS
    >
    > A .tip { display: none; }
    > A:hover .tip {display: inline; }
    > .tip DIV {
    > border: 1px solid black;
    > color: black;
    > background-color: #ffd;
    > font-size: 80%;
    > width: 15em;
    > padding: .2em;
    > }
    >
    > <a href="#">Lorem ipsum
    > <span class="tip">
    > <div>
    > Lorem ipsum dolor sit amet, consectetuer ...
    > </div>
    > </span>
    > </a>


    -A div in a span?

    >
    > This will cause your text to reflow, I think I have see some examples
    > with position : absolute but lining up the div will be tricky...
    >
    >


    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Oct 5, 2005
    #8
  9. Neredbojias wrote:

    <snip>
    >
    > -A div in a span?
    >

    Yep, should just dump the span, not needed...



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 6, 2005
    #9
  10. Brian Cryer

    Neredbojias Guest

    With neither quill nor qualm, Jonathan N. Little quothed:

    > Neredbojias wrote:
    >
    > <snip>
    > >
    > > -A div in a span?
    > >

    > Yep, should just dump the span, not needed...


    Well, if it's any consolation, finding it gave me an almost licentious
    thrill.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Oct 6, 2005
    #10
  11. Neredbojias wrote:
    > With neither quill nor qualm, Jonathan N. Little quothed:
    >
    >
    >>Neredbojias wrote:
    >>
    >><snip>
    >>
    >>>-A div in a span?
    >>>

    >>
    >>Yep, should just dump the span, not needed...

    >
    >
    > Well, if it's any consolation, finding it gave me an almost licentious
    > thrill.
    >

    Woot, woot, woooot! :-D

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 6, 2005
    #11
  12. Brian Cryer

    Toby Inkster Guest

    Jonathan N. Little wrote:

    > <a href="#">Lorem ipsum
    > <span class="tip">
    > <div>
    > Lorem ipsum dolor sit amet, consectetuer ...
    > </div>
    > </span>
    > </a>


    Except that nesting a DIV inside a SPAN is a no-no.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Oct 6, 2005
    #12
  13. Brian Cryer

    Toby Inkster Guest

    Jonathan N. Little wrote:
    > Neredbojias wrote:
    >
    >> -A div in a span?

    >
    > Yep, should just dump the span, not needed...


    Keep the SPAN. Dump the DIV.

    Better still, change the SPAN to a SMALL, and dump the DIV.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Oct 6, 2005
    #13
  14. Brian Cryer

    Brian Cryer Guest

    "Arne" <> wrote in message
    news:...
    > Once upon a time *Brian Cryer* wrote:
    >> I want to show extra information about a link and am doing this by
    >> placing a
    >> short narrative in the title attribute of an <a href... link. This works
    >> fine in Internet Explorer (and I'm hoping in other browsers - I know I
    >> should have checked but I've not done so yet), IE shows a tool-tip style
    >> box
    >> when I hover the mouse over the link. My question is whether it is
    >> possible
    >> to apply any formatting to this? what I'm really after is a line break,
    >> but
    >> if I put a <br> it comes out as part of the title.
    >>
    >> Any ideas would be appreciated. So too would be the knowledge that it
    >> can't
    >> be done (if it can't be done).

    >
    > You could try to use the same technic as is used here with pure CSS:
    > http://www.meyerweb.com/eric/css/edge/popups/demo.html
    >
    > --
    > /Arne
    > Now killing all posts originating at GoogleGroups
    > Workaround: http://www.safalra.com/special/googlegroupsreply/
    > -------------------------------------------------------------


    Thanks Arne. When I first looked at that I thought it must be using
    JavaScript, but it doesn't. Its a very clever alternative.

    Thanks. Much appreciated.
    --
    Brian Cryer
    www.cryer.co.uk/brian
     
    Brian Cryer, Oct 6, 2005
    #14
  15. Brian Cryer

    Brian Cryer Guest

    "Jonathan N. Little" <> wrote in message
    news:TPS0f.612$...
    > Jonathan N. Little wrote:
    >
    >> Brian Cryer wrote:
    >>
    >>> I want to show extra information about a link and am doing this by
    >>> placing a short narrative in the title attribute of an <a href... link.
    >>> This works fine in Internet Explorer (and I'm hoping in other browsers -
    >>> I know I should have checked but I've not done so yet), IE shows a
    >>> tool-tip style box when I hover the mouse over the link. My question is
    >>> whether it is possible to apply any formatting to this? what I'm really
    >>> after is a line break, but if I put a <br> it comes out as part of the
    >>> title.
    >>>
    >>> Any ideas would be appreciated. So too would be the knowledge that it
    >>> can't be done (if it can't be done).

    >>
    >>
    >> You cannot format the tooltip created by the title attribute, and if you
    >> get your title text too long some (maybe all) UA's will truncate the text
    >>
    >> There are JavaScript tooltips, but of course require JavaScript to be
    >> enabled
    >>
    >> You can use CSS
    >>
    >> A .tip { display: none; }
    >> A:hover .tip {display: inline; }
    >> .tip DIV {
    >> border: 1px solid black;
    >> color: black;
    >> background-color: #ffd;
    >> font-size: 80%;
    >> width: 15em;
    >> padding: .2em;
    >> }
    >>
    >> <a href="#">Lorem ipsum
    >> <span class="tip">
    >> <div>
    >> Lorem ipsum dolor sit amet, consectetuer ...
    >> </div>
    >> </span>
    >> </a>
    >>
    >> This will cause your text to reflow, I think I have see some examples
    >> with position : absolute but lining up the div will be tricky...
    >>

    > This might be what you are looking for:
    >
    > Pure CSS Tooltips
    > http://psacake.com/web/jl.asp
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com


    Thanks Jonathan. I think css is the way to go, it just wasn't something I'd
    considered before. I'm glad someone was thinking outside of the box.
    --
    Brian Cryer
    www.cryer.co.uk/brian
     
    Brian Cryer, Oct 6, 2005
    #15
    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. CRON
    Replies:
    24
    Views:
    200,816
    Adrienne Boswell
    Jun 20, 2006
  2. Soren Vejrum
    Replies:
    4
    Views:
    620
    Lasse Reichstein Nielsen
    Jul 5, 2003
  3. saiho.yuen
    Replies:
    3
    Views:
    434
    kaeli
    Sep 14, 2004
  4. Replies:
    2
    Views:
    479
  5. Vincent van Beveren

    BASE HREF and A HREF="#" onclick="..."

    Vincent van Beveren, Jul 6, 2006, in forum: Javascript
    Replies:
    2
    Views:
    327
    Vincent van Beveren
    Jul 6, 2006
Loading...

Share This Page