📊

CSS が 原因で Google Charts の Tooltips が表示されなかった件

2024/07/03に公開

状況

  • Google Charts でグラフを作成し,表示された.

  • カーソルを当てたときに表示される Tooltips が表示されない.

  • コンソール見てもエラーは出ていない.

原因

下記の CSS を書いていたのが原因.他のページで svg 要素にクリックイベントを設定するために記述していた.

svg {
  pointer-events: none;
}

解決策

上記 CSS を削除したら解決.別ページのクリックイベント設定部分は別にクラス名を追加して対応すれば OK.

感想

JS の挙動を疑って時間溶かした.最終的に下記の手順で解決.いつもの総当り力技.

  • HTML 要素を削除しつつ絞り込み

  • CSS ファイルが影響していたため,CSS ファイルの中身を削除しつつ絞り込み

  • 原因箇所を特定

以上だ( `・ω・)b

GitHubで編集を提案

Discussion