Best alternative to the 'title' attribute for storing data, like alternative meanings of words

I'm going to use jquery to show alternative meanings for words not everyone would immediately know or understand. For 开发者_运维知识库a really bad example: "Johnny is a little boy." A user could mark a checkbox to turn on a mode where it would now be: "Johnny is a little (tiny, small, short) boy." Again, very simple example. I don't want to use the title attribute because it pops up that little ugly tooltip. Some might be okay with that, I'm not.

What would be the best attribute, or method of doing this? Creating my own attribute? What are the benefits and pitfalls?

<span data-easy="tiny, not large" class="easy"> small </span>

use jQuerys data, http://api.jquery.com/jQuery.data/

maby use CSS to display them:

span.makeeasy[data-easy]:after { content: " (" attr(data-easy) ")"; }

then put the content in a DIV and add the 'makeeasy' class to display the values. (you might need a fallback for older brwsers)

This is probably an appropriate use for the HTML 5 data- attributes. You can define your own attribute, such as data-translation, and use it like this:

Johnny is a <span data-translation="tiny, small, short">little</span> boy.

You can then write some code to take the data from the data-translation attribute and insert it after the span element when the user enables translations.

Why not use a definition list (dl) with dd for definitions and dt for terms: http://w3schools.com/html/html_lists.asp

I would suggest you to try out jQuery data: http://api.jquery.com/jQuery.data/