display:noneしている要素を、hoverした要素のy座標に表示させたい

前提・実現したいこと

display:none;している.fukidashiを、添付画像のようにhoverしたtrのすぐ横に表示させたいです。
tableはスクロールされるように書いております。
下記コードのように、hoverしたら表示させる...までは出来たのですが、
hoverした要素のy座標に表示させる方法が、調べたのですがいまいちわかりません。
どのようなjsの書き方をすれば表示させられるでしょうか。
説明に足りない部分があると思いますので、不明点がございましたらご指摘ください。
よろしくお願いいたします。

ソースコード

html
1<body>
2    <div class="fukidashi">吹き出し</div>
3    <div class="wrap">
4        <div class="scroll">
5            <table>
6                <tr>
7                    <td>テキスト</td>
8                    <td>テキスト</td>
9                    <td>テキスト</td>
10                    
11                </tr>
12                <tr>
13                    <td>テキスト</td>
14                    <td>テキスト</td>
15                    <td>テキスト</td>
16                    
17                </tr>
18                <tr>
19                    <td>テキスト</td>
20                    <td>テキスト</td>
21                    <td>テキスト</td>
22                    
23                </tr>
24                <tr>
25                    <td>テキスト</td>
26                    <td>テキスト</td>
27                    <td>テキスト</td>
28                    
29                </tr>
30                <tr>
31                    <td>テキスト</td>
32                    <td>テキスト</td>
33                    <td>テキスト</td>
34                    
35                </tr>
36                <tr>
37                    <td>テキスト</td>
38                    <td>テキスト</td>
39                    <td>テキスト</td>
40                    
41                </tr>
42                <tr>
43                    <td>テキスト</td>
44                    <td>テキスト</td>
45                    <td>テキスト</td>
46                    
47                </tr>
48                <tr>
49                    <td>テキスト</td>
50                    <td>テキスト</td>
51                    <td>テキスト</td>
52                    
53                </tr>
54                <tr>
55                    <td>テキスト</td>
56                    <td>テキスト</td>
57                    <td>テキスト</td>
58                    
59                </tr>
60                <tr>
61                    <td>テキスト</td>
62                    <td>テキスト</td>
63                    <td>テキスト</td>
64                    
65                </tr>
66            </table>
67        </div>
68    </div>
69</body>

css
1 body{
2        background: rgb(23, 32, 49);
3        width: 100%;
4        height: 100vh;
5        position: relative;
6    }
7    .wrap{
8        position: absolute;
9        left: 10px;
10    }
11    .scroll{
12        background-color: #fff;
13        overflow: auto;
14        height: 430px;
15        width: 100%;
16    }
17
18    table tr{
19        width: 100%;
20        height: 70px;
21        background-color: rgb(129, 129, 129);
22    }
23
24    table tr td{
25        width: 200px;
26    }
27
28    .fukidashi{
29        display: none;
30        width: 400px;
31        height: 70px;
32        background-color: antiquewhite;
33    }

js
1$('tr').hover(
2        function() {
3          $('.fukidashi').css('display','inline-block');
4        },
5        function() {
6            $('.fukidashi').css('display','none');
7        }
8      );

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

回答1件

まず、.wrapの左上を基準にして吹き出しの位置を調整したいので、.fukidashiを.wrapの中に移動します。

html
1<div class="wrap">
2    <div class="fukidashi">吹き出し</div>
3    <div class="scroll">
4    ...

次に、吹き出しの位置をtopとrightで調整できるように、position:absoluteにします。

css
1.fukidashi{
2    ...
3    position: absolute;
4    right: -400px;
5}

rightを小さくするほど、吹き出しは右寄りに移動します。ここでは、吹き出しの幅の分だけ右へ寄せる(-400px)ことにより、吹き出しが、.wrapの右側に貼り付く感じになります。

あとはJSで、topの値を調整するだけです。

javascript
1$('tr').hover(
2    function() {
3      $('.fukidashi').css('display','inline-block')
4          .css('top', $(this).position().top);
5    },
6    ...