Can you give me a hint?
How long have I been using HTML now? At least 4 years. Yet I still seem to learn of new tags all the time. How long can it take to learn the lot? After all there are only 91 of them in the standard W3C HTML 4 specification. Examples of those that had escaped me for years include <cite>, <blockquote>, <code> and <pre>. All useful in their own little way. Not so much in every day Domino development, but when you start to write articles like this they can save time and fingers.
Today I learnt of <abbr> and <acronym>. Neither of them are supported in NN4 and the latter only in IE4+, OP4+ and NN6. Let's see to what effect we can use the <acronym> tag.
What it would be nice to do:
Anything that makes an application easier for the end user to get to grips with has to be a good thing. This is normally a case of making it as much like what they are used to as possible. Take for example the Windows Help system and the words that are underlined in little green dots. This indicates to the user that if they click it it will tell them a little more about what that term means in a small popup ToolTip, like in Figure 1.
Wouldn't this kind of thing be useful on most of our web applications too. How though? Recently I was asked to add a help message for every field on a form. I opted for a link next to each one that used the JavaScript alert() method each time they clicked the "help" link. Never was quite 100% happy with this though as it involves two mouse clicks and mouse movement = hassle for the user. You can see an example of exactly how "bad" it was here.
Doing it in the browser:
The two tags we talked about earlier, <abbr> and <acronym>, are intended for things like search engines and speech synthesisers so they can make sense of the page content. We can also use them to mimic the above functionality. Both tags accept an attribute called "title" that is used to give the full meaning of each. In the browser when you hold the mouse over a word for long enough it will display a similar looking tooltip like in Figure 2. Opera 5 takes it one step further and shows the text on the status bar as well, which is nice.
Not everything is an acronym though is it. It's a good job we can use the title attribute in a <span> tag as well then isn't it. We'll have a look at this later. All we need to do now is make it more obvious to the user that the text in question holds this extra information. Using a little CSS we can then get it to look like that in Figure 3 where the text has a dotted underline. What you can't see in this screen-grab is that the mouse has changed in to the help cursor and shows a question mark.
How do we do this then:
I used screenshots in the above examples so as not to exclude users of browsers that don't support this from the discussion. The rest of the article uses examples so you may not be able to appreciate it without a decent browser. Let's look at a form that uses these tips on its field labels:
| Your PIN number: | |
| Your Support ID: |
To do this we simply add Pass-Thru HTML to the form in the place you want the help to appear. So for the first field from above we use:
Your <acronym title="Personal Identification Number">PIN</acronym> number:
and for the second field where the help is not for an acronym and is more general:
Your <span class="tip" title="The ID you were given when you first called the support line">Support ID</span>:
Notice that the span tag had a class attribute assigned to it but the <accronym> tag did not. This is because we can change the style of all <accronym> tags and assume they are always tips, whereas we only want to do it for <span> tags specified as "tips". All we need do then is add the following CSS definitions to the form. See! I'm using it already ;)
abbr, acronym, .tip {
border-bottom: 1px dotted #00cc33;
cursor: help;
}This simply tells all <abbr> and <acronym> tags and those tags with a "tip" class assigned that the icon is the help icon and that they are to be underlined with green dots (IE5.5+, OP5+ and NN6+).Et, voila. There you have it. Nice and simple but the user/manager/team-mate will doubtless be very impressed.
Great Idea....
...Hi Jake
Love this idea. Real innovation. I think I will be using this idea in my current intranet application. Keep up the good work with the site!
Talk 2 ya soon.
Reply
Excellent
Excellent tip/idea. After figuring out where to put the style, it worked like a charm. Thanks a million.
Mike Werner Paris, France
Reply
Great idea!
This is something that I can implement in an intranet environment!
Reply
Adding some bells and whistles...
First, great tip Jon.
My problem is I hate having 'long' HTML format strings in the middle of my text. It is very hard to read in small table cells in the Domino designer. Also, if I want to change any of them, I have to search through the form to find each <SPAN> pair.
So, I decided to use this tip with two simple JavaScript functions to make the HTML format string shorter. It also has the benefit of making it dynamic and reusable.
First, I write my span tags using an only a unique ID <SPAN ID="HP">Home Phone</SPAN>
Next, I have 2 JavaScript functions in the JS Header. The first (setTitle) is a utility to set the TITLE and CLASS for a specific element. * This function is browser specific.
The second function (loadTitles) is used to call setTitle for all the ID's I need to populate.
function setTitle(id,title,tclass){ var tspan=document.all[id] tspan.className=tclass tspan.title=title }
function loadTitles() { setTitle("HP","Please enter your home phone number.","tip") }
Last, add loadTitles() to the onLoad event.
This may seem like extra work, but now I can change all my titles in one place (loadTitles function). It also makes it easier to make standard messages and combine messages. For example, here loadTitles has a privacy statement that can be added to any field.
function loadTitles() { var privacynotice="\nWe will not share this information with anyone." setTitle("WP","Please enter your work phone number."+privacynotice,"tip") setTitle("WA","Please enter your work address."+privacynotice,"tip") setTitle("HP","We will give this to anyone who asks.","tip2") }
This same logic (using JavaScript to set the TITLE property) can be used to change the title on the fly. For example, after a user selects a radio button with Home or Work options, you could switch the title on any address fields to be specific to their selection.
Reply
Who's Jon?
Did you mean me? Not that I shall hold it against you as I like the people who use this response for what it was intended: Adding value and NOT asking silly questions....
Cheers anyway Dick ;) Jake
Reply
I used it in views
Jake
I used it in a view where I show only 20 characters of the title of documents and used the acronymn tag to to show the full title.
It works great.
Thanks Patrick
Reply
Don't tell Iris.
I've been doing similar things for a while now. Looks like Iris have done the same in the Notes.net Café as well. They have a limited Title showing in the view and then the first line of the Body as a Pop-Up. Lord knows why. It makes it almost unusable (IMHO).
Thanks for the feedback, Jake
Reply
ermmmmm
erm - i dont see any lines on IE 5 (win2k) must be a 5.5+ thing afaik..
Reply
Re: ermmmmm
Woops. You're right, it doesn't work in IE5. Must be a 5.5 thing. Thanks for letting me know. I shall correct the article right now....
Jake
Reply
Tool tip for Hotspot on Image
Hi,
I have an single big image on the PAGE,I have added several hotspots on the image(texts on image). My users can't make out that they have click on the texts on image,so they need tool tip for each hotspot.so when they move on the screen and if the cursor appears on any hotspot,they get tool tip message.
Could you pls help on this ?
--Murtaza.
Reply
Re: Tool tip for Hotspot on Image
Try giving the hotspot a "title" attribute. Like this:
<a href="gohere?Open" title="There is a link here">
Here's an example link. Hover over it and you should see a hint like box.
[<a href="http://www.codestore.com" title="Can you stick it?!">codestore.net</a>]
jake
Reply
Excellent
I used the tip and it ROCKS!!
Reply
not so fast... Re: ermmmmm
actually it works fine on IE 5 for Macs, just not for PCs.
(I think IE 5 on Macs is actually equivalent to 5.5 on Windows, but M$ didn't want to name them the same, since 5 came out on the Mac before 5.5 came out on the PC.)
Reply