css - 当我将鼠标悬停在工具提示上时看到在 html 中编写的脚本

Question

仅当页面初始加载时，我才将鼠标放在工具提示上时遇到问题。当我登录网站时，当我将鼠标放在“？”上时加载页面后字形符号，我能够看到写在 html 中的整个标题脚本。

这是我悬停时看到的以下文字。这是工具提示中带有关闭按钮“x”的标题。

About your score<button type=button class=close data-dismiss=popover aria-hidden=true onclick=$('#abcPopover').popover('hide')>&times;</button>

我将工具提示设为可点击。当我点击“？”字形符号弹出窗口不会在第一次单击时出现，脚本现在正在隐藏。当我点击“？”字形符号第二次工作正常弹出窗口即将到来。这是我仅在页面加载时和单击“？”时才看到的问题。字形符号标题将隐藏，第二次单击时工作正常，弹出窗口将出现。

这是我用html写的代码。

<a href="#" id="abcPopover" data-html="true"
                   title="About your score<button type=button class=close data-dismiss=popover aria-hidden=true onclick=$('#abcPopover').popover('hide')>&times;</button>"  
                   data-toggle="popover" data-content="{{abcTooltip}}" ng-click="open()"><i class="glyphicon glyphicon-question-sign"></i></a>

Answer 1

根据 HTML5 Spec Document from W3C，在 Html 标签中嵌套按钮不是有效的 HTML5 :

Content model: Transparent, but there must be no interactive content descendant.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

换句话说，您可以将任何元素嵌套在 an 中，但以下元素除外:

<a>

<audio> (如果存在控件属性)

<button>

<details>

<embed>

<iframe>

<img> (如果存在 usemap 属性)

<input> (如果type属性不在隐藏状态)

<keygen>

<label>

<menu> (如果type属性处于工具栏状态)

<object> (如果存在 usemap 属性)

<select>

<textarea>

<video> (如果存在控件属性)

但是，如果您的 <button>标记使用 CSS 设计样式，看起来不像系统的小部件...帮自己一个忙，为您的 <a> 创建一个新类以相同的方式标记和设置样式。

检查此链接以创建您的工具提示。 Link

Fiddle