tooltipで省略せずに改行させたい

Question

tooltipで省略せずに改行させたい

初歩的な質問で申し訳ありませんが有識者の方がいらっしゃいましたらご教授頂きたいです。

###やりたいこと
・bind変数で入ってくる値をツールチップで表示させたい。
・日本語、英数ともに任意の場所で自動で折り返しさせたい。
・途中で省略させたくない。

###環境
AngularJS1.5/JQuery/bootstrap/HTML5
表示はPCを前提とする。
ブラウザはIE11

###発生している問題

通常のtitle属性では値が長いと途中で省略してしまい、全体を表示できない。
bootstapのuib-tooltipを試したが、使用している元要素のradiusを消してしまう（radiusがlast-childにならない）
uib-tooltipを分けて、<p>タグの間に<span>タグを入れて実装してみたら、<p>タグの領域でtooltipが見切れる

bootstrapでradiusを消さない方法か、titleで省略されない方法があればと思います。
またbootstrapのuib-tooltipを使用する場合、左右上下だけでなく、左上、などの細かい位置指定の方法があればご教授いただけると助かります。

###ソース

<p class="a b c" uib-tooltip="{{AAA}}" tooltip-placement="bottom">{{AAA}}</p>

class a:<p>タグ内のフォントサイズ等を指定
class b:<p>タグ内のborder、background-color、radiusを設定
class c:<p>タグ内の省略等の設定。

{{AAA}}：今回使用したいバインド変数。内容が変わる。100byte以上入ってくる想定。

Answer 1

位置に関してはtooltip-placementの設定でright-topとかで変わるようです。
radiusに関しては、何かどうかかってどうだからどうダメなのか不明なので不明です。

最後に根本的な話ですが、CSSでツールチップを出す手もありますよ？

• CSSで作るツールチップ

Comments

[rudolf_fox]

radiusに関しまして補足しますと、
もともと<p>タグ内で書いている内容には角丸の対応が入っており、マウスオンしbootstrapのツールチップを表示するとなぜか角丸が消えてしまう状態です。
IE標準のデバッグで見たところ、適応はされているようです（last-childとして表示されている）
なのでbootstrapが上書きしているのかと思いましたが見当たりません。

CSSで作るツールチップについて
情報ありがとうございます。JQueryのものも試しておりますので並行して試してみたいと思います。

[rudolf_fox]

あと位置に関してもありがとうございます。topにrightがくっつけられることがどこにも出ていなかったので非常に助かります。

[gin]

うーん、さすがに「last-child」だけで見当をつけるのはちょっと厳しいですね…
現状はCSSを一度お試しくださいくらいです。
ひとまずはまるまるコピーでいけるでしょうし、デザインもある程度融通が利きます。

[rudolf_fox]

情報少ないですよね…申し訳ありません。
引き続き試しつつ調査を続けたいと思います。
ご丁寧にありがとうございました。
解決したらまた回答を載せたいと思います。

[rudolf_fox]

最終的にbootstrapのツールチップを採用しました。
radiusが適応されない件については、大元のradiusだけを使用するのではなく、改めてradiusを指定するクラスを切り、別名で指定してあげたらツールチップを載せた際に見た目が変わる、ということはなくなりましたので優先順位的な問題かもしれません。

今回CSSのツールチップは使用しませんでしたが、別の機会に役立ちそうなので非常にありがたかったのと、別途困っていた位置の詳細指定についても回答していただいたginさんにベストアンサーを差し上げたいと思います。

[gin]

あ、classの追加でいけたんですね
ならよかったです～