Question

我刚从48.0更新了Firefox到48.0.1，现在我发现了Bootstrap工具提示的问题。看看Firebug中的HTML，似乎Firefox在页面底部添加了一个不在.jsp中的新<div>：

<div id="tooltip404721" class="tooltip fade top in" role="tooltip" style="top: 162.4px; left: 1220.5px; display: block;">
    <div class="tooltip-arrow" style="left: 50%;"></div>
    <div class="tooltip-inner">Delete</div>
</div>

仅当工具提示附加到按钮时才会发生这种情况 - 链接不受影响。链接和按钮是jQuery DataTables表中的列元素。链接与按钮的代码的工具提示部分是相同的。

链接：

<td><a class="btn btn-info btn-xs" href="<c:url value='/recipe/viewRecipe/${recipe.id}'/>"
data-toggle="tooltip" data-placement="top" title="<spring:message code="tooltip.view"></spring:message>">
<span class="glyphicon glyphicon-list-alt"></span></a>

按钮：

<td><button class="btn btn-danger btn-xs" type="button" id="delete${recipe.id}" onclick="deleteRecipe(${recipe.id}, 
'<spring:escapeBody javaScriptEscape="true">${recipe.name}</spring:escapeBody>')"
data-toggle="tooltip" data-placement="top" title="<spring:message code="tooltip.delete"></spring:message>">
<span class="glyphicon glyphicon-remove"></span></button>

此DataTables特定设置位于页面中包含的.js文件中：

$('[data-toggle="tooltip"]').tooltip({
    container : 'body'
});

删除上面的内容会删除额外的<div>，但随后工具提示不再显示Bootstrap格式。将data-container="body"添加到按钮本身也不起作用。

有什么想法吗？

修改虽然我刚刚注意到这个问题，但我将其降级为47.0.1但仍然看到了问题。我将继续降级以找出这个版本出现的版本。我不认为这是我的代码，因为生产版本与我的开发版本具有相同的问题。此外，这不会发生在Chrome中，但会在Edge中发生。

Answer 1

我发现了问题。我有一个函数，它应用于所有页面，将表单页面的输入焦点设置为第一个表单控件。这是因为菜单包含一个搜索输入和按钮，否则它将获得焦点而不是第一个表单输入。

function setInputFocus() {$(':input:visible:enabled:eq(2)').focus();}

由于某些原因，我现在不记得了，我移动了代码来切换工具提示（请参阅问题）上面这个焦点代码。这意味着数据表第一行中的第一个按钮最终获得焦点，因此在显示页面时可以看到工具提示。移动工具提示切换之后此焦点代码解决了问题。

显然，我应该更加关注特定于特定问题的网站范围代码，但最终会应用于所有网页......

Firefox的Bootstrap工具提示问题

1 个答案: