【问题标题】:The content of my tooltip is not formatted in html我的工具提示的内容未格式化为 html
【发布时间】:2014-10-22 15:46:27
【问题描述】:

我有兴趣使用 tooltipster 制作可访问的工具提示。问题是我的工具提示的内容不是 html 格式的。几乎没问题,除了不支持 html 标签(p 和 img)的工具提示内容。函数 .html() 应该可以完成这项工作,不是吗?

HTML

<a href="#" id="my_id" class="picto-tooltip" aria-describedby="my_id_description"></a>
<div id="my_id_description" role="tooltip">
<p>This the title for the tooltip</p>
<img src="/images/myimage.jpg" alt="Alternative text for the image" />
</div>

JS

$('#my_id').tooltipster({ 函数初始化:函数(){ 返回 $('#my_id_description').html(); }, 函数就绪:函数(){ $('#my_id_description').attr('aria-hidden', false); }, 函数之后:函数(){ $('#my_id_description').attr('aria-hidden', true); } });

感谢您的帮助。

【问题讨论】:

  • 是的,它以这种方式工作,但我必须以另一种方式来实现它的键盘可访问性。该方法位于链接的同一页面上,位于底部。本节称为“使残障人士可以使用工具提示”。

标签: jquery jquery-tooltip


【解决方案1】:

从文档中,听起来工具提示的内容必须是 jQuery 元素,并且您使用的是字符串。

尝试返回元素而不是元素的 HTML:

$('#my_id').tooltipster({
  functionInit: function(){
    return $('#my_id_description');
  },
  ...
});

【讨论】:

  • 是的,我也试过了,但在这种情况下,工具提示内容为空。
  • 谢谢卡洛斯。我知道它在使用 js 生成 html 时有效。但是对于键盘可访问性,我需要在 html 中获取工具提示内容(p 和 img)
  • 我得到了答案:只需将刺包在另一个“$())”中,如下所示:return $($('#my_id_description').html());
猜你喜欢
  • 1970-01-01
  • 2015-09-13
  • 2015-06-17
  • 1970-01-01
  • 2022-08-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多