ツールチップの表示位置

前提・発生している問題

現在CSSとHTMLを用いてアイコンに対してオンマウス時に表示するツールチップを作成していますが、以下画像の様に2行以上の文章になった時に文章と被ってしまい、またオンマウス時にちらつきます。

1行

2行以上

html
1<span class="baseUnit__title__item">
2  たとえばなんかやたら長くなって2行以上になる時
3  <i class="fas fa-question-circle modTooltips"></i>
4  <span class="modTooltips__item">ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。</span>
5  <i class="fas fa-pencil-alt baseUnit__title__edit"></i>
6</span>

css
1.modTooltips {
2  cursor: pointer;
3  font-size: 1.3rem;
4  position: relative;
5}
6.modTooltips:hover+.modTooltips__item {
7  display: block;
8}
9.modTooltips__item {
10  background: rgba(34,39,45,.8);
11  border-radius: 3px;
12  color: #fff;
13  display: none;
14  font-weight: normal;
15  padding: 12px;
16    bottom: -3rem;
17  position: absolute;
18    min-width: 200px;
19  width: 100%;
20  z-index: 9999;
21}

実現したいこと

・複数行にの際も、1行の時と似た様な位置（アイコンからの距離）に表示させたい。
・レスポンシブ対応。

top: -3remが問題とわかっているのですが、複数行の時はこう…といった設定はCSSではできない（複数行用のクラス名付与等は建設的ではない）と思っています。できればツールチップの動作含めjqueryに移行して、位置を自動で取得する様にしたいのですが、調べてみても表示まではできても位置調整のやりかたがわかりません。

行動規範の内容に同意します

回答1件

自己解決

以下で思い通り動きました。

jquery
1$(function(){
2  $(".modTooltips").on({
3    'mouseenter':function(){
4      var text = $(this).attr('data-text');
5      $(this).append('<span class="modTooltips__item">'+text+'</span>');
6    },
7    'mouseleave':function(){
8      $(this).find(".modTooltips__item").remove();
9    }
10  });
11});

html
1<span class="modTooltips" data-text="XXX">
2  <i class="fas fa-question-circle"></i>
3  <i class="fas fa-pencil-alt baseUnit__title__edit"></i>
4</span>

css
1/*タイトル横ハテナ*/
2.modTooltips {
3  cursor: pointer;
4  font-size: 1.3rem;
5  position: relative;
6}
7.modTooltips:hover .modTooltips__item {
8  display: block;
9}
10.modTooltips__item {
11  background: rgba(34,39,45,.8);
12  border-radius: 3px;
13  color: #fff;
14  display: none;
15  font-weight: normal;
16  padding: 12px;
17  position: absolute;
18    min-width: 200px;
19  width: 100%;
20  z-index: 9999;
21}