質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

13482閲覧

【bootstrap】tooltipを最前面に表示したい

rudolf_fox

総合スコア25

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2016/11/21 03:39

編集2016/11/21 05:09

###前提・実現したいこと
bootstrapのtooltipを最前面に表示したい

###発生している問題・エラーメッセージ
angularJS環境内でbootstrapのtooltipを使用していますが、どうしても他の要素に隠れてしまいます。
(例:grid内にtooltipをおいた場合、gridのヘッダー内でしか表示できず、見切れてしまう)

書き方としては以下のように書いています。

<div class="アイコン画像" uib-tooltip="{{内容(可変)}}" tooltip-placement="bottom-left"></div>

###試したこと
0. container="body"属性の使用
同様の箇所にcontainer="body"属性を使用するためにtooltip-append-to-body="true"という記述とtooltip-container="body"という記述を試しましたが反映されないようです。

  1. position: fixed属性の使用

.tooltip-innerposition: fixedを追加したところ、tooltip本体が表示されなくなりました(arrowは出る)

  1. position:absolute,z-indexマックス値の使用

.tooltip-innerposition:absoluteを追加し、z-indexにマックス値(乱暴なやり方ですが)をしてみました。
状況は変わらず、gridヘッダ内にしか表示されません。(見切れ発生)

###補足情報(言語/FW/ツール等のバージョンなど)
typescript使用
angularJS使用
ui-grid内の現象
私が書いたコードではないため、何が問題なのかどの様におっていけばいいかわからない状態です。
また、tooltip自体をuib-tooltipという書き方をしている情報が非常に少なく、困っています。
現状の状態から新しいtooltipに変える、という考えは今のところありません。(新たなバグを埋め込みさせたくないため)
情報が乏しい中大変申し訳ございませんが、何か心当たりがある方教えていただけると非常に助かります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

外側の要素に overflow: hidden; が設定されているとか?

投稿2016/11/21 05:25

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rudolf_fox

2016/11/21 05:37

ご回答ありがとうございます。 デバッグツールで確認したところ、たしかに外側の要素にoverflow: hidden;が設定されておりました...。 これから影響調査と対策調査をしたいと思います。 外側の要素のoverflowに関して盲点になっておりました。 ドンピシャな心当たりありがとうございます! 解決いたしましたら改めてコメントさせていただきたいと思います。
rudolf_fox

2016/11/21 06:21

あとから読み込まれるCSSでui-grid.css のoverflow:hiddenをvisibleで上書いた状態で、tooltip-append-to-body="true"を設定したところ無事最前面に表示できました。 説明がわやわやだったのにもかかわらずドンピシャなご指摘をしていただきありがとうございます…!とっても助かりました! ui-gridもbootstraoのtooltipもほとんど使用経験が無いため、こんなこともあるんだなぁ、と参考になりました。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問