コピペでOK！カーソルを合わせると表示される文字(ツールチップ)の表示の仕方＆削除したい時に使えるJavascript

WEBサイトを見ているときに、画像や文字にカーソルを合わせるとテキストが表示されることがありませんか？

これは、ツールチップと呼ばれているもので、注釈や補足説明をするときなどに使われます。

画像や文字にカーソルを合わせると文字が表示されるようにする方法（title属性の設定）

画像や文字にカーソルを合わせると文字が表示されるタグはtitle属性と呼ばれ、 title=”ここに説明書き”　といったように使われます。
例えば↓のテキストにカーソルを合わせてみてください。

ここにカーソルを合わせてみてください

上のテキストのタグはこうなっています。

<span title="ここに説明書きが表示されます">ここにカーソルを合わせてみてください</span>

このように、title属性は該当する要素にカーソルを合わせるとテキストを表示させることができます。
title属性は画像やリンクなどいろいろなタグに使うことができます。
※alt属性との使い分けについてはこのページでは割愛

しかし、このtitle属性が視覚的に邪魔になることがあります。
自分でWEBサイトを製作している場合であれば使用しなかったり、削除すればいいのですが、Wordpressのテーマとしてデフォルトで設定されている場合、手動で削除するのが困難な場合があります。
その時は、Javascriptで一括して削除してしまいましょう！

下記のうち、必要なソースを<body>の手前などに記述してみてください。

画像からtitle属性を一括で削除する

<script>
	var objimg = document.getElementsByTagName("img");
	for(var i=0,l=objimg.length - 1;i<l;i++){
		objimg[i].removeAttribute("title");
	}
</script>

リンクからtitle属性を一括で削除する

<script>
	var objimg = document.getElementsByTagName("a");
	for(var i=0,l=objimg.length - 1;i<l;i++){
		objimg[i].removeAttribute("title");
	}
</script>

画像とリンクからtitle属性を一括で削除する

<script>
	var obja = document.getElementsByTagName("a");
	for(var i=0,l=obja.length - 1;i<l;i++){
		obja[i].removeAttribute("title");
	}
	var objimg = document.getElementsByTagName("img");
	for(var i=0,l=objimg.length - 1;i<l;i++){
		objimg[i].removeAttribute("title");
	}
</script>

仕組みとしては、aタグやimgタグに設定されているtitleタグを置換して一括で削除しています。
非常にニッチな需要かと思いますが、実際必要があったので…。自分メモも兼ねてサイトに乗せておきます。