using a help cursor

claudecf · Member · Oct 19, 2007 at 5:35 pm
Copy link

Add topic to favorites
My blog is in French, but I know I have US readers and would like to add help to some words. By hovering on a word, the reader would get help.
This is what I have in my css
```
span.help {
background:#fff;
color:#666;
cursor:help;
font-style:bold;
border-bottom:1px dashed #666;
}
```
but when I type Word that I want to add help to

the “title” part gets stripped. Do I do something wrong, or does wordpress.com not allow span class="help"?

Would there be any workaround?
Thanks in advance
my blog is at http://vieuxcestmieux.com
but of course, I can’t show any example that worked :(
judyb12 · Member · Oct 19, 2007 at 5:46 pm
Copy link
deleted – i’ll be back…
judyb12 · Member · Oct 19, 2007 at 5:50 pm
Copy link
okay, i’m back.

forget it. Go with what you got below.
claudecf · Member · Oct 19, 2007 at 5:52 pm
Copy link
On another forum, someone suggested I wrote
```
.acronym {
	background:#FFFFFF;
	border-bottom:1px dashed #666666;
	color:#666666;
	cursor:help;
	font-weight:bolder;
}
```
in the css and then <acronym title="the explanation I want">the word I want explained</acronym>
Although it’s obviously not an acronym. But mind you, I tried it, and it’s working!
Any expert css advice?
claudecf · Member · Oct 19, 2007 at 6:03 pm
Copy link
OK thanks
naitkat · Member · Oct 21, 2007 at 12:50 am
Copy link
what do you mean it gets stripped? You should be able to see the title attribute in a small tooltip on span hover.

Did you maybe want to style the tooltip itself, and not the span text?
claudecf · Member · Oct 21, 2007 at 8:01 am
Copy link
No, I can see the tooltip ok but the content of the title just disappears.
Also, I have been told that the workaround is awful because it mixes up things for blind people. I’d be really grateful if someone came up with another solution
naitkat · Member · Oct 21, 2007 at 11:02 am
Copy link
I visited your site and saw the title tooltips in action in the header navigation and it all seems to be working fine (I checked in FX and IE6).

When I hovered over “A propos” I saw the tooltip “A propos”, and its the same for all the other items. Can you explain a bit more what you mean when you say something disappears?

btw: the “blog” button in header is messing with your navigation, pushing the last item below into second row, is that a problem? Also your sidebar is pushed all the way down below content in IE6. The sidebar (.secondary) has a left margin set to 71%, but since the whole page is fixed width you can use fixed amount there, I would replace 71% with 560px (or more).
claudecf · Member · Oct 21, 2007 at 11:20 am
Copy link
naitkat, if you look at my first post here, what I am trying to do is add a help cursor to certain words.
In other places, I am quite aware that ‘title’ works fine. I am not sure how to explain it otherwise than up at my first post in this thread. Thanks for the help
naitkat · Member · Oct 21, 2007 at 1:28 pm
Copy link
The rule for cursor you mentioned in your first post is correct:

cursor:help;

I tested it by adding Word that I want to add help to somewhere on the page and it worked, the text is styled with a dashed bottom border and I could see the cursor change to a question mark cursor.
This means that when you want to make a word or expression behave this way you have to enclose it between and :)

There are some minor mistakes in the code from your first post; you have to use background-color property instead of just background and if you want the text to be bold the property should be font-weight, but if you want it italicized you should use font-style:italic;

Here’s the correct way:

span.help {
background-color:#fff;
color:#666;
cursor:help;
font-weight:bold;
border-bottom:1px dashed #666;
}

Maybe this will fix what was wrong
claudecf · Member · Oct 21, 2007 at 2:28 pm
Copy link
I copied and pasted what you suggested in my css and tried this on my blog
Word that I want to add help to
saved and this is what happened when I saved:
Word that I want to add help to
the title part had disappeared again. I tried this on my other blog as well and am getting exactly the same thing.
I am using firefox 2.008 on a macintosh and also tried it with safari, and get the same result.

Thanks for the help
myronhoward · Member · Oct 21, 2007 at 3:27 pm
Copy link
There have been a number of discussions regarding the use of the Title attribute. It seems that WordPress will accept it in a link or acronym tag. You might try that. Although there is no indication in IE 7 that something may be there in FF it is underlined with dots.

<acronym title="World Wide Web">WWW</acronym>

I have an example of this on http://myronsotherblog.wordpress.com/
claudecf · Member · Oct 21, 2007 at 3:59 pm
Copy link
myronhoward, as stated at the beginning of this thread, yes, it works with the acronym tag. But when you are using the acronym tag for things that are not acronyms, it is quite misleading to blind people for example. Which was why I was asking for help here.
myronhoward · Member · Oct 21, 2007 at 4:18 pm
Copy link
claudecf, I did overlook your post regarding the acronym attribute. Sorry about that. But sometimes we just have to make do. And there are quite a few errors on a WordPress blog if you try to validate it. Perhaps you could use a text widget in the side bar to explain how you are using the acronym attribute on your blog.

And I find I don’t do a lot of the things you don’t do anymore either. :)
claudecf · Member · Oct 21, 2007 at 4:42 pm
Copy link
;) myronhoward, as you said there are some advantages to being old.
The text widget in the side bar is definitely a good idea.
naitkat · Member · Oct 21, 2007 at 5:37 pm
Copy link
now I get what you mean! This is very strange, must be a bug. I guess you can only wait till staff address it.

heres a similar thread https://en.forums.wordpress.com/topic.php?id=16891&page&replies=6
options · Member · Oct 21, 2007 at 6:58 pm
Copy link
TITLE is a pretty much valid standard attribute of SPAN element in XHTML 1.0 Transitional (uppercase names hereafter are just for emphasis).

furthermore this attribute is intended exactly specifically for purposes like what the OP needs, i.e.: accessibility, annotations, SEO etc.

neither ACRONYM, nor ABBREV elements were never intended for that, although they could be used in this way, of course, just as well as Anchor element:<a href="#" title="lame" class="help">bousillage</a>

not sure how the title attr. can be used in malicious way in the span element (which is itself used to get stripped by the ‘paranoid WP filters‘, btw), but it is clearly a bug.

so you might want to try your luck submitting a feedback request so that they would fix this bug, which can be achieved by editing just one line in the kses.php.
claudecf · Member · Oct 22, 2007 at 10:25 am
Copy link
Thanks, I will try support when it opens. :)
claudecf · Member · Oct 27, 2007 at 9:44 am
Copy link
I wrote to support and received a reply from Andy, which says

Hello Claude,

I have added title to the allowed attributes for the span tag.

Thanks a lot Andy! The question is now resolved :)

No items found.