【问题标题】:SVG title tooltip not showing on text elementSVG 标题工具提示未显示在文本元素上
【发布时间】:2019-02-02 07:57:19
【问题描述】:

我需要在 SVG 文本元素的鼠标悬停时显示工具提示。我在网上找到的所有内容都说要添加一个 Title 元素作为 SVG 元素的第一个子元素。它适用于 Chrome,但不适用于我用户群的主要浏览器 Safari。

这是显示我的情况的简化示例。



是一个 FontAwesome 灯泡图标,它是我希望用户将鼠标悬停并显示工具提示的元素。

<svg ...><text><title>some text</title>&#xf0eb;</text></svg>

想法?

【问题讨论】:

  • 我最终通过使用 jQuery 工具提示而不是我从未使用过的 SVG 标题解决了这个问题。让问题悬而未决。

标签: javascript jquery html svg tooltip


【解决方案1】:

我在 Safari 12.1 中测试了以下 sn-p,工具顶部的“一些文本”按预期显示。也许您正在使用旧版本的 Safari 进行测试,或者您正在使用影响此功能的插件?

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

<svg width="50" height="50">
  <text x="10" y="20" class="fas">
    <title>some text</title>
    &#xf0eb;
  </text>
</svg>

【讨论】:

    猜你喜欢
    • 2021-04-28
    • 2016-10-20
    • 1970-01-01
    • 2013-06-11
    • 2016-08-19
    • 1970-01-01
    • 2018-03-05
    • 2013-11-07
    • 2016-05-14
    相关资源
    最近更新 更多