|
Posted by Brian Cryer on 11/18/45 11:29
"Jonathan N. Little" <lws4art@centralva.net> wrote in message
news:TPS0f.612$PA1.75351@monger.newsread.com...
> 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
Navigation:
[Reply to this message]
|