用于存储数据的'title'属性的最佳替代方法，如单词的替代含义

Question

我将使用jQuery来显示不是每个人都会立即知道或理解的单词的替代含义。举一个非常糟糕的例子：“约翰尼是个小男孩。”用户可以标记一个复选框来打开现在的模式：“Johnny是一个小（小，小，短）的男孩。”再次，非常简单的例子。我不想使用title属性，因为它弹出了那个小小的丑陋的工具提示。有些人可能没有问题，我不是。

什么是最好的属性或方法呢？创建我自己的属性？什么是好处和陷阱？

Answer 1

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

使用jQuerys数据，http://api.jquery.com/jQuery.data/

莫比使用CSS来显示它们：

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

然后把内容的DIV，并添加 'makeeasy' 类来显示的值。 （你可能需要一个旧brwsers后备）

Answer 2

我建议你尝试一下jQuery的数据：http://api.jquery.com/jQuery.data/

Answer 3

为什么不dd的定义和dt使用一个定义列表（dl）的条款：http://w3schools.com/html/html_lists.asp

Answer 4

这可能是一个合适的使用HTML 5 data- attributes。您可以定义自己的属性，如data-translation，并使用它像这样：

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

然后，您可以编写一些代码来从data-translation属性获取数据和span元素后插入它时，用户能够翻译。