[JavaScript] ツールチップを設定する

投稿日：2016年10月30日更新日：2018年5月3日

JavaScriptでツールチップを設定するサンプルです。

サンプルソース

例）ボタンを押すと、入力された値がツールチップとして設定される

function setToolTip(){
  var str = document.getElementById("txt1").value;
  document.getElementById("target").title = str;
}

function setToolTip(){

var str = document.getElementById("txt1").value;

document.getElementById("target").title = str;

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" id="txt1" >
  <input type="button" value="ボタン" onclick="setToolTip();" />
  <p id="target">カーソルを当ててください</p>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p id="target">カーソルを当ててください</p>

</body>

</html>

実行サンプル

ボタンを押すと、入力した文字がツールチップとして黄色枠部分に適用されます。

カーソルを当ててください

解説

ツールチップを設定するには、要素のtitleプロパティに値を設定すればOKです。

執筆者：とら