ファンキットのツールチップの表示について

**Lye** · 03-29-2019 12:24 AM

ファンキットのツールチップについて、
CSSでDIV要素に対してbox-sizingを使用していると、ツールチップが表示されません。
ツールチップを設定したリンクへのホバー時に0px×0px/overflow:hiddenとなっています。
表示させる方法が有りましたら、教えていただけると助かります。

また、ツールチップ内の表示に影響が出るCSSが設定されている場合に意図して非表示となる様設定されている場合、
box-sizing使用時の表示対応を要望としたいと思います。

--------------------

box-sizingはページ内の各要素のサイズ調整を効率化する為、全体にかけて使用している状態です。

**locknrole** · 03-29-2019 02:28 AM

気になったので試してみたのですが、わたしの環境では特に問題なく表示されてしまいました。
以下のような実装で合っていますか？

======

【html】
〜略〜
<a href="https://jp.finalfantasyxiv.com/lodestone/playguide/db/item/b2cab67854f/" class="eorzeadb_link">バハムートブレード</a>
<script src="https://img.finalfantasyxiv.com/lds/pc/global/js/eorzeadb/loader.js?v2"></script>
〜略〜

【css】
div {
box-sizing: border-box;
}

======

再現できなかったため別の問題のような気がしているので、「box-sizingの指定を回避する方法」という方向で回答させていただきますね。
ツールチップ表示は #eorzeadb_tooltip のidがついたdivが追加されその中に展開されるようなので、cssにて

======

【css】
#eorzeadb_tooltip,
#eorzeadb_tooltip div {
box-sizing: content-box; // またはinherit、あるいはborder-box
}

======

といったような形で今指定しているものを解除するとよいのではと思います。
興味があるので、というのと、ソースコードがないと誰もあまり具体的なことは言えない（わからない）と思うので
ぜひ実際のコードを見せていただければと思います。

**NoonW** · 03-29-2019 03:09 AM

ブラウザによる違いがあるかもしれません。
当方の環境（Windows 10 / Chrome 73.0.3683.86）では、以下のコード（index.htmlのみ）でLyeさんの仰る問題が再現しました。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div { box-sizing: border-box; }
</style>
</head>
<body>
<script src="https://img.finalfantasyxiv.com/lds/pc/global/js/eorzeadb/loader.js?v2"></script>
<a href="https://jp.finalfantasyxiv.com/lodestone/playguide/db/item/b2cab67854f/" class="eorzeadb_link">バハムートブレード</a>
</body>
</html>

（上記内容と同等のJSFiddle）
https://jsfiddle.net/ecxr3ubd/

おそらく意図して非表示にしているわけではなく、box-sizingとサイズ計算にまつわる問題だと思います。
ちょっと調べてみましたが、根本的な原因はわかりませんでした。

場当たり的対応ですが、ページ全体に適用されるCSSに手を加えられる環境のようなので、
div#eorzeadb_tooltip {
overflow: visible !important;
}
を追加すれば、ページ全体に div { box-sizing: border-box; } を適用していてもツールチップが見えるようになると思います。
（ファンキットのページにある8種について確認しました。）

---

理想的には、ご自身のコンテンツを<div id="my_wrapper">等で囲み、
div#my_wrapper div { box-sizing: border-box; } のようにして、
ツールチップの部分には影響が及ばないようなCSSに変更すると、
div以外のスタイルで競合が起きる可能性も防げるので、将来的にも安全かと思います。

**Lye** · 04-02-2019 08:00 PM

locknroleさん、NoonWさん
情報ありがとうございます！

■再現について
私が試していたソースコードNoonWさんが書いていたものと同じ以下の内容です。

HTML Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>div{box-sizing: border-box;}</style>
</head>
<body>
<script src="https://img.finalfantasyxiv.com/lds/pc/global/js/eorzeadb/loader.js?v2"></script>
<a href="https://jp.finalfantasyxiv.com/lodestone/playguide/db/item/b2cab67854f/" class="eorzeadb_link">バハムートブレード</a>
</body>
</html>

ブラウザによって違う可能性について指摘いただいていたので、
ブラウザ別で確認してみました。

【確認ブラウザ】
・InternetExplorer(11.648.17134.0)
・Edge(42.17134.1.0)
・Chrome(73.0.3683.86)
・Firefox(66.0.2)
※Mac故障中につきSafariは無し

まず、<style>～</style>の1行をコメントアウトした状態で確認したところ、
4ブラウザ全てでポップの表示が出ました。
その後、コメントアウトを外して再度確認したところ、
Firefoxのみポップ表示され、残り3つのブラウザでは表示されませんでした。
結果として、ご指摘通り、ブラウザで違い有り　となっている様です。

■回避方法について
NoonWさん記載の内容（下記1行）を差し込んだところ、
4つのブラウザ全てで表示の崩れ等無くポップ表示されました！

HTML Code:

<style>div#eorzeadb_tooltip {overflow: visible !important;}</style>

自分で作っているCSSの方をどう設定しようかと悩んでいたところ、
ツールチップ側のidに追加するのは目からうぺぺでした。
ありがとうございます。

＞運営様
上記対応で、ツールチップの使用ルール上問題が有りましたら、
使用は控えたいと思いますので、ご指摘お願いします。

■結果的な要望
Firefoxでは上記回避方法をとらずとも特に問題なく表示される様ですので、
他ブラウザでの表示について、回避方法を取らずとも表示される様、
ご対応いただけると嬉しいです。

Thread: ファンキットのツールチップの表示について

Thread Tools

Search Thread

Display

ファンキットのツールチップの表示について