親要素の横幅を無視したい

Question

###実現したいこと
ホバーで表示されるツールチップについて、その横幅を文の長さに応じて可変にしたいです。

現状では、min-width指定のせいで文が短いときに横幅があまるのでそれをやめて、max-widthだけの指定をしたいです。

###発生している問題
ツールチップはボタンの兄弟要素として.append()されます。

そのため、width指定をしなければ、親要素の幅までになってしまいます。

そこで親要素の幅を超えるためにmin-width:200px;を指定しました。

すると今度は短い文のときに幅が余ってしまうというジレンマです。

これをmax-widht指定だけ残しつつ、親要素の幅を無関係に（文の長さぴったりに）できませんでしょうか？

下記ソースコードのサンプル

###該当のソースコード
これがツールチップのコードです。

まずはHTMLです。

<div class="items">

  <div class="item" data-type="1">
    <button type="button" class="tooltip">
      <span class="icon">■</span>
      <span class="text">ボタン１</span>
    </button>
  </div>

  <div class="item"  data-type="2">
    <button type="button" class="tooltip" data-type="2">
      <span class="icon">■</span>
      <span class="text">ボタン２</span>
    </button>
  </div>

</div>

続いてCSSですが、ここでmin-width: 200px;と指定しないとツールチップは.itemという親要素の幅を超えることができません。
しかし、指定すると今度は文が短いとき200pxに達せず幅が余ってしまうわために悩んでいます。

.items {
	display: flex;
}
.item {
	position: relative;
}
.tooltip {
	position: relative;
	z-index: 2; 
}
.tooltip_hover {
	position: absolute;
	display: inline-block;
	padding: 7px 10px;
	border-radius: 3px;
	text-align: left;
	left: 0;
	z-index: 1;
	color: #333;
	background: pink;
	min-width: 200px; /* 指定しないと .itemの幅を来れられない */
	max-width: 300px;  
}
.tooltip_hover::before {
	content: "";
	position: absolute;
	top: -25px;
	left: 10px;
	border: 15px solid transparent;
	border-bottom: 15px solid pink;
}

以下はホバー時のjQueryです。

$(document).on('mouseover','.tooltip', function(){
  const type = $(this).parent().attr('data-type');
  let mes;
  if( type=='1' ){
  	mes = '横幅があまる';
  }else{
  	mes = '文章が長ければ横幅が余ることはない';
  }
  const top = parseInt( $(this).outerHeight() ) + 10;
  $(this).parent().append('<span class="tooltip_hover" style="top:'+top+'px">'+mes+'</span>');	
});

$(document).on('mouseout','.tooltip', function(){
  $(this).parent().find('.tooltip_hover').remove();
});

###試したこと
CSSで、文の長さに応じて指定すれば上は解決できます。

.tooltip[data-type="1"] .tooltip_hover {
	min-width: 100px; /* 短い文のときは短い幅にする */
}
.tooltip[data-type="2"] .tooltip_hover {
	min-width: 200px;
}

ですが実際には、文が（let mes;が）ランダムなのでこの方法は使えませんでした。

どうすれば、親の.itemの幅を超えて、文の長さに適度な（普通にwidth:auto;指定のときのような）幅にできるでしょうか？

Answer 1

div を追加するとかで

$(this).parent().append('<div class="tooltip_wrapper"><span class="tooltip_hover" style="top:'+top+'px">'+mes+'</span></div>');

.tooltip_wrapper {
    position: fixed;
}

.tooltip_hover {
    /*position: absolute;*/
    /* 略 */
}

Comments

[macaron_xxx]

これだと△が反映されなくないですか？

[x_x]

手元では解決したコードも用意してありますが、それくらいは調整できるだろうという考えです。

[pariparipotato]

fixedをヒントにこうできました。
https://jsfiddle.net/g23j1pex/
しかし、スクロールするとその位置がズレてしまいます。
x_xさんの解決コードはこのズレを解決できるものでしたか？もしそうであれば教えて頂きたいのですが…

[x_x]

最後に
$('.tooltip_wrapper', $(this).parent()).css('top', this.getBoundingClientRect().bottom);
を加えてみてください

[pariparipotato]

魔法すぎますｗできました。
https://jsfiddle.net/r5fc9ux4/

すみません何が起こったのか教えてください。いろいろ調べて自分で書いたのがこれ（https://jsfiddle.net/r5fc9ux4/1/）で、でも同じことにならず。何が違いますか？
同じ方法（getBoundingClientRect）で測り、その位置を「.tooltip_hover」の位置として扱っているつもりです。

[x_x]

getBoundingClientRect() は jQuery ではないのでエラー出ているみたいですね
https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect

[pariparipotato]

ほんとですね。だからx_xさんのやつはthisにドルマークがなかったんですね。ありがとうございました。