Jspreadsheet CEでヘッダーをホバー時にTooltipを表示する

はじめに

Streamlitのdataframeエレメントにある、スプレッドシートのヘッダー部分をマウスホバーしたらhelpメッセージをTooltipで表示できる機能をJspreadsheetでも使いた～～い！

公式ドキュメントのHeadersページにそれっぽい設定項目(Initial Settingsのtooltip)あるけど動かない！

というかこの記述は誤記っぽそう
昔のバージョンでは存在してたのかな？

結局ないなら自分で用意するしかないか～～

作ってみた

まずはサンプル

https://stackblitz.com/edit/8iclqdmn?file=index.html

jspreadsheet(document.getElementById('spreadsheet'), {
  worksheets: [
    {
      minDimensions: [3, 3],
    },
  ],
  onload(instance) {
    const root = instance.el;
    const headers = root.querySelectorAll('.jss_worksheet > thead td');
    headers.forEach((td, idx) => {
      td.setAttribute('title', `${idx}番目のカラム`);
    });
  },
});

Jspreadsheetはcolumnのtitleの値を、出力されるHTMLのテーブルヘッダー内のtdタグにも<td title="タイトル">A</td>というように設定してくれています。

そして、HTMLにおいてこのtitle属性は、いわゆるツールチップのような動きをしてくれます。

これを上手く利用して簡単に実現できました！

スタイルをいじりたい場合

td.setAttribute('title', help)の代わりに独自の属性を設定し、その独自の属性に対してCSSを書けば実現可能です。