2016-08-23 8 views
0

Я только что обновил Firefox до 48.0.1 с 48.0, и теперь я вижу проблему с подсказкой Bootstrap. Глядя на HTML в Firebug, кажется, что Firefox добавляет новый <div> в нижней части страницы, которая не в .jsp:Проблема с всплывающей подсказкой Bootstrap с Firefox

<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 файл включен в ра GE:

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

Удаление вышеперечисленного избавляется от дополнительной <div>, но тогда подсказка больше не появляется с Bootstrap форматирования. Добавление data-container="body" к самой кнопке тоже не сработало.

Любые идеи?

EDIT: Хотя я совсем недавно заметил проблему, я понизил ее до 47.0.1 и все еще вижу проблему. Я буду продолжать понижать, чтобы узнать, в какую версию входит этот запуск. Я не думаю, что это мой код, потому что производственная версия имеет ту же проблему, что и моя версия dev. Кроме того, этого не происходит в Chrome, но это происходит в Edge.

+0

Я не думаю, что ваш браузер или версия не имеет ничего общего с этим. Всплывающие подсказки Bootstrap всегда делали дополнительный ('div') элемент для показа всплывающей подсказки. Можете ли вы сделать демоверсию, которая показывает проблему? – thirtydot

+0

Согласен. Я просто проверил производственный сайт на моем ноутбуке, на котором работает Firefox 45, и проблема появляется и в этой версии. Очевидно, я подпрыгнул до неправильного вывода, так как я не видел проблему в Chrome. Это должно быть то, что я изменил в недавнем выпуске. Я проверю это и опубликую обновление, когда я (надеюсь) найду его. – LWK69

ответ

0

Я нашел проблему. У меня есть функция, которая применяется ко всем страницам, которые задают фокус ввода для страниц формы для элемента управления первой формы. Это связано с тем, что в меню есть вход для поиска и кнопка, которая в противном случае получала бы фокус вместо ввода первой формы.

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

По какой-то причине, что я не помню сейчас я переехал код для переключения в подсказке (см вопрос) выше этот фокус кода. Это означало, что первая кнопка в первой строке datatable оказалась в фокусе, поэтому всплывающая подсказка была видна при отображении страницы. Перемещение переключателя всплывающей подсказки после этот код фокусировки исправил проблему.

Очевидно, что я должен быть более осторожным на веб-узле кода, который относится к конкретному вопросу, но заканчивает тем, что применяется ко всем страницам ...

Смежные вопросы