z-indexを使った重ね合わせ順序制御がうまくいかない

実現したいこと

下記掲載のHTMLを実行すると、この図のようなレイアウトになります。

【現状】
fontawesomeのアイコンにカーソルを合わせるとツールチップが表示されますが、そのツールチップがbg-infoで色付けしたdiv枠の後ろ側に配置されてしまい、表示が隠れてしまいます。

【やりたいこと】
bg-info枠の上にツールチップが表示されるようにしたいです。

発生している問題・分からないこと

「実現したいことを教えてください」をご参照ください。

該当のソースコード

HTML
1<html lang="ja">
2<head>
3    <meta charset="utf-8">
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5
6    <title></title>
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8
9    <!-- Styles -->
10    <link href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">
11    <style>
12        .tooltip-001 {
13            display: inline-block;
14            position: relative;
15        }
16        .tooltip-001 > div {
17            cursor: pointer;
18        }
19        .tooltip-001 > span {
20            display: flex;
21            justify-content: center;
22            visibility: hidden;
23            opacity: 0;
24            position: absolute;
25            bottom: -40px;
26            left: 50%;
27            transform: translateX(-50%);
28            padding: .25em .5em;
29            border-radius: 3px;
30            background-color: black;
31            color: white;
32            font-size: .7em;
33            white-space: nowrap;
34            transition: opacity .3s;
35        }
36        .tooltip-001 > span::before {
37            position: absolute;
38            z-index: 100;
39            top: -6px;
40            width: 9px;
41            height: 6px;
42            background-color: inherit;
43            clip-path: polygon(50% 0, 0 100%, 100% 100%);
44            content: '';
45        }
46        .tooltip-001:hover > span {
47            visibility: visible;
48            opacity: 1;
49        }
50    </style>
51</head>
52<body class="drawer drawer--left" style="padding-top: 3.6rem; ">
53<div id="app">
54    <nav class="navbar navbar-expand-md navbar-light shadow-sm bg-white fixed-top">
55        <div class="container justify-content-center">
56            <div class="row col-xl-10 pl-0 pr-0">
57                <div class="col-12 pl-0 pr-0">
58                    <div class="row">
59                        <div class="col-8"></div>
60                        <div class="col-4 pl-0 pt-1  text-right">
61                            <div class="d-block">
62                                <div class="float-right tooltip-001">
63                                    <div>
64                                        <span class="nav-link p-0 ml-2 "><i class="fa-regular fa-user"></i></span>
65                                    </div>
66                                    <span datatype="tooltip">会員登録</span>
67                                </div>
68                                <div class="float-right tooltip-001 z-n1">
69                                    <div>
70                                        <span class="nav-link p-0 ml-2 "><i class="fa-solid fa-right-to-bracket"></i></span>
71                                    </div>
72                                    <span datatype="tooltip">ログイン</span>
73                                </div>
74                            </div>
75                        </div>
76                    </div>
77                </div>
78
79                <div class="col-12 pl-0 pr-0">
80                    <div class="col-12">
81                        <div class="bg-info" style="position: relative; z-index: 10;">
82                            &emsp;<br>
83                            &emsp;<br>
84                            &emsp;<br>
85                            &emsp;<br>
86                        </div>
87                    </div>
88                </div>
89            </div>
90        </div>
91    </nav>
92</div>
93</body>
94</html>
95

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

配置順番は、z-indexを使うことを下記のサイトで知り、記事の内容をやってみましたが、うまくいかなかったです。

補足

特になし

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

回答1件

ベストアンサー

提示されたソースコードでは .tooltip-001 > span::before に対して z-index: 100; を設定されていますが、
この span::before というのは、ツールチップ本体ではなく
clip-path: polygon等を用いてフキダシを三角形に整形するための空っぽの疑似要素であり、
これだけを最前面においてもツールチップ本体は隠れたままです。