2016-08-23 8 views
0

Firefoxを48.0.1から48.0にアップデートしましたが、今は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> 

このツールチップは、ボタンに接続されている場合にのみ起こる:Firebugの中にHTMLを見ると、Firefoxが.jspファイルではありませんページの下部に<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> 

このDataTableの固有の設定は、.jsファイルにPAに含まれますGE:上記を削除する

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

は、余分な<div>を取り除くませんますが、その後、ツールチップは、もはやブートストラップのフォーマットで表示されます。ボタン自体にdata-container="body"を追加しても機能しませんでした。

アイデア?

編集: 私は最近問題に気付きましたが、私は47.0.1にダウングレードしましたが、まだ問題があります。私はダウングレードして、このバージョンがどのバージョンに現れているかを調べます。プロダクションバージョンには私の開発バージョンと同じ問題があるので、私のコードではないと思います。また、これはChromeでは発生しませんが、Edgeでは実行されます。

+0

...特定の問題に固有のものですが、すべてのページに適用されてしまうサイト全体のコードの詳細注意する必要がありますそれと。ブートストラップツールチップはツールチップを表示するために常に余分な( 'div')要素を作成しています。問題を示すデモを作成できますか? – thirtydot

+0

私は同意します。私はちょうどFirefox 45を実行している私のラップトップ上の生産ウェブサイトをチェックし、問題はそのバージョンにも表示されます。明らかに、私はChromeでこの問題が見られなかったので、間違った結論に飛びました。最近のリリースで変更されたものになるはずです。私はそれをチェックし、私が(うまくいけば)それを見つけるときに更新を投稿します。 – LWK69

答えて

0

問題が見つかりました。フォームページの入力フォーカスを最初のフォームコントロールに設定するすべてのページに適用される関数があります。これは、メニューに検索入力とボタンが含まれているため、最初のフォーム入力ではなくフォーカスが得られるためです。私はこのフォーカスコード上記(質問を参照)ツールチップを切り替えるには、コードを移動し、今覚えていないいくつかの理由

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

。つまり、データテーブルの最初の行の最初のボタンがフォーカスを取得し、ページが表示されたときにツールチップが表示されていました。
の後にツールチップのトグルを に移動すると、このフォーカスコードが問題を解決しました。

もちろん、私は、ブラウザやバージョンが行うには何を持っているとは思わない