javascript ツールチップを改行して表示する

作成日 2022.07.11
javascript
javascript

javascriptで、ツールチップを改行して表示するサンプルコードを記述してます。

1. 環境
2. ツールチップを改行
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.66

Javascript サンプル集はこちら

ツールチップを改行

ツールチップを改行するには、「title」を使用して、「\n」で改行します。

document.getElementById('要素').title = "文字列\n文字列";

実際に改行を表示してみます。

<p id="hoge">表示</p>

<script>

document.getElementById('hoge').title = "hello\nworld";

</script>

実行結果

サンプルコード

以下は、
ボタンにホバーすると改行を含むツールチップを表示するだけのサンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<script>

  window.onload = () => {
    btn.title = "hello\nworld";
  }

</script>

<body>
  <div class="container mx-auto my-56 w-64 px-4">

    <div id="sample" class="flex flex-col justify-center">

      <button type="button" id="btn" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
        tooltip
      </button>
      
    </div>

  </div>
</body>

</html>

実行結果を確認すると、表示されていることが確認できます。