②Tooltips_技術検証 - Paku-Soba/Svelte-example-app GitHub Wiki

...
<li class="px-4">
       <div class="collapse">
             <input type="checkbox" name="my-accordion-8" />
                  <div class="collapse-title flex items-center font-semibold text-sm text-textColor">
                       <svg id="icon_open_s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" 
                             height="20" viewBox="0 0 20 20">
                             <defs>
                               <clipPath id="clip-path">
                                  <rect id="長方形_388" data-name="長方形 388" width="20" height="20" fill="none"/>
                               </clipPath>
                             </defs>
                             <g id="グループ_1246" data-name="グループ 1246" transform="translate(0 20) rotate(-90)">
                                 <g id="グループ_1246-2" data-name="グループ 1246" clip-path="url(#clip-path)">
                                    <path id="パス_4204" data-name="パス 4204" d="M15.933,28.807a1,1,0,0,1-.707-.293L9.193,22.481A1,1,0,0,1,9.9,20.774H21.967a1,1,0,0,1,.707,1.707l-6.033,6.033a1,1,0,0,1-.707.293m-3.619-6.033,3.619,3.619,3.619-3.619Z" transform="translate(-5.933 -13.849)" fill="#707070"/>
                                 </g>
                             </g>
                        </svg>
                        <span class="px-3 text-textColor01">akutsu20154_20240105…</span></div>
                   <div class="collapse-content px-8 font-thin text-sm text-textColor01">
                         <div class="border-l-2 border-neutral-300">
                              <ul class="px-2">
                                   <li>プロンプト :<span class="tool-tip font-semibold" tooltip-data="「02. 議事録を要約する」
  # 命令書 あなたはプロの編集者です。私が入力する文章を日本語で要約して文章で出力してください。# 制約条件・返信内容にタイトルは不要です。・箇条書きは禁止です。文章にしてください。・返事は要約した文章のみを返してください。前置きや会話は不要です。"> 02.議事録を要約する</span></li>
                                        <li>音声の長さ : 00:10:34 </li>
                                        <li>指定時間　 : 00:04:00 - 00:14:34</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
...

<style>
   .tool-tip {
        position: relative; /* ツールチップの位置の基準に */
        cursor: pointer; /* カーソルを当てたときにポインターに */
    }

    .tool-tip:before {
        content: attr(tooltip-data);
        opacity: 0;
        visibility: hidden;
        position: absolute;
        white-space: nowrap;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        transform: translateX(-50%);
        border-radius: 5px;
        z-index: 1;
        transition: all .6s ease-in-out;
        top: -43px;
        left: 50%;
        font-size: 70%;
    }

    .tool-tip:after {
        content: "";
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: -11px;
        left: calc(50% - 8px);
        transition: all .6s ease-in-out;
        border: 9px solid transparent;
        border-top: 9px solid #555;
    }

    .tool-tip:hover:before,
    .tool-tip:hover:after {
        opacity: 1;
        visibility: visible;
    }

</style>