自作ツールチップ

編集：2023.07.03 by T.A.

HTML文書に自作のツールチップを表示させるように組み込みます。

HTML要素の既存の title 属性の代わりに titletext 属性を設定し、その内容を表示させる。

CSSにより表示形態も変えられるようにする。文字を大きく…色…フォント等。

組み込み方

HEAD要素内でスクリプト「MyTooltip.js」を読み込ませるだけ。 

<HEAD>
<SCRIPT src="MyTooltip.js"></SCRIPT>
</HEAD>

CSSで、以下の指定が必要になる事があります。数値はHTMLのCSSに寄るもので、大きいほど手前に表示されます。 

#Title{	/* ツールチップ要素のid */
	z-index:1;
}

そして文書では、表示させたい要素の開始タグに titletext 属性を指定する。

要素の構文
<要素名 titletext="TitleText">要素内容</要素名>
要素名 要素。例：DIV、SPAN、TABLE、…。
TitleText ツールチップ表示させるHTMLテキスト。

例：「1文字」

例：「テスト<B>太字</B><BR>テキスト
改行した」

要素内容 要素の内容で、必ず要素を表示させるような内容…全角スペースとかが最小限必要。

※ 当文書にサンプルとしてCSSが組み込んであります。

注意

title 属性が有る場合は、title 属性の内容も表示される事になりますのでご注意を。要素によっては初期的にツールチップが表示されるものがあります。

例： INPUT要素で type=file の場合 

<INPUT type=file titletext="titletext による表示">

表示例：