opera:hige

■ [customize][Userjs]ツールチップを表示する 04:53

Operaのデフォルトでは背景色が黄色のツールチップが表示されると思う。できたっけ？

それを違う色で表示するようなUserJavascriptを書いてみた。

もちろん背景色以外にも色々変えることができる。

document.addEventListener('load', showTooltip, false);

function showTooltip() {
	var ancs = document.links;
	for(var i=0,len=ancs.length;i<len;i++) {
		ancs[i].onmouseover = popups;
		ancs[i].onmouseout = popdowns;
	}
}

function popups(e) {
	url = this.href;
	title = this.title;
	chk = false;
	if(!this.title) {
		content = 'URL: '+ url;		
	} else {
		content = 'Title: ' + title + '<br />URL : '+ url;
	}
	defx = e.clientX + document.body.scrollLeft + 10;
	defy = e.clientY + document.body.scrollTop - 35;
	tID = setTimeout("tipShow()",1000); // ツールチップを表示するまでの時間。
}

function tipShow() {
	tltp = document.createElement('div');
	tltp.id = 'ppps'
	with(tltp.style) {
		visibility = 'visible';
		position = 'absolute';
		minWidth = '200px';
		top = defy;
		padding = '2px';
		background = '#000' //ツールチップの背景の色
		color = '#fff'; //ツールチップの文字の色
		textAlign = 'left';
		fontSize = '12px'; //ツールチップの文字の大きさ
		border = '1px solid #fff';
	}
	if(innerWidth < (250 + defx)) {
		tltp.style.left = innerWidth - 230;
	} else {
		tltp.style.left = defx;
	}
	if (url.match(/^.*\.(jpe?g|bmp|gif|png)$/i)) {
		tltp.innerHTML = '<img src=\"' + url + '" style=\"max-width:396px;\"alt=\"\" /><br />' + content;
	} else {
		tltp.innerHTML = content;
	}
	document.body.appendChild(tltp);
}

function popdowns() {
	clearTimeout(tID);
	tltp.style.visibility = 'hidden';
}

Operaのデフォルトのツールチップを表示しない設定にしておくこと。

既知の問題

リンクのある場所によってはツールチップがはみだして表示されてしまう。

リンクにマウスポインタが乗るとすぐにツールチップが表示されるのでかなりうざい。

Linux版だとツールチップを表示しない設定にできないのか？Preferences>Advanced>Browsing>Show tooltipsにチェックを入れても次に設定画面を開くとチェックがはずれている。外れているにもかかわらず、ツールチップを表示してしまう。わけわからん。

さて、改造するかな。。。

usopionさんがコメントにかかれているようにWindowsでも背景色フォント等を変えられるみたい。んーそれだったらこれ以上いじる必要ないかもと思ったが、知識を深めるためにもう少しいじってみる。

リンクがウィンドウの右端付近にあればツールチップがはみでてしまうのでその問題を解決しようと,innerWidthを使ってウインドウのサイズを取得し、ごにょごにょしてみる。が、スラッシュで区切られたURLだとちゃんと折り返してくれてウィンドウ内に収まってくれるが、はてなキーワードなURLだと折り返してくれない。。。

追記

表示するまでの時間を設定できるようになった。

ツールチップの位置、幅に関しては見直しの必要あり。

デフォルトのツールチップの色を変えることができるんだから、このスクリプト版はもっと派手なツールチップにしたほうが意味がでるのかもな。

追記 22:40

背景を透過画像にしたら見にくくなった。んー存在価値を見出すために付け足すとしたらリンク先が画像の場合ついでに表示とかかな。Ajax勉強しなきゃ。

追記 0:15

リンク先が画像の場合、画像もついでに表示するようにしてみた。Ajaxいらなかったや。勉強不足。

Thanks, usopion.

追記 0:55

修正。