ホームページ作成備忘録

ホームページを作成に関する備忘録

吹き出しのあるツールチップを表示する

１．javascriptを利用したツールチップ

Xhtmlファイル

01<?xml version="1.0" encording="utf-8"?>
02<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
03<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
04<head>
05<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
06<script type="text/javascript" src="/js/bubble-tooltip.js"></script>
07<link type="text/css" rel="stylesheet" href="/css/bubble-tooltip.css" media="screen"/>
08 
09</head>
10<body>
11<div id="bubble_tooltip">
12    <div class="bubble_top"><span></span></div>
13    <div class="bubble_middle"><span id="bubble_tooltip_content">Content is comming here as you probably can see.Content is comming here as you probably can see.</span></div>
14    <div class="bubble_bottom"></div>
15</div>
16 
17<a href="#" onmouseover="showToolTip(event,'このように吹き出しのツールチップが表示されます！');return false" onmouseout="hideToolTip()">ここにマウスを置いて下さい</a>
18</body>
19</html>

２．CSSのみで行うツールチップ

Styleの定義（htmlのヘッダ内又は外部CSSファイル）

01まずは、head内にてスタイルを定義します。
02<style type="text/css">
03/*---------- bubble tooltip -----------*/
04a.tt{
05    position:relative;
06    z-index:24;
07    color:#3CA3FF;
08    font-weight:bold;
09    text-decoration:none;
10}
11a.tt span{ display: none; }
12 
13/*background:; ie hack, something must be changed in a for ie to execute it*/
14a.tt:hover{ z-index:25; color: #aaaaff; background:;}
15a.tt:hover span.tooltip{
16    display:block;
17    position:absolute;
18    top:0px; left:0;
19    padding: 15px 0 0 0;
20    width:200px;
21    color: #993300;
22    text-align: center;
23    filter: alpha(opacity:90);
24    KHTMLOpacity: 0.90;
25    MozOpacity: 0.90;
26    opacity: 0.90;
27}
28a.tt:hover span.top{
29    display: block;
30    padding: 30px 8px 0;
31    background: url(bubble.gif) no-repeat top;
32}
33a.tt:hover span.middle{ /* different middle bg for stretch */
34    display: block;
35    padding: 0 8px; 
36    background: url(bubble_filler.gif) repeat bottom; 
37}
38a.tt:hover span.bottom{
39    display: block;
40    padding:3px 8px 10px;
41    color: #548912;
42    background: url(bubble.gif) no-repeat bottom;
43}
44</style>

html内の記述

`1`	`<a` `href="#"` `class="tt">ここにマウスを！<span` `class="tooltip"><span` `class="top"></span>`

`2`	`<span` `class="middle">このようにツールチップが出現します。やや透明なので結構クールかも。 </span><span` `class="bottom"></span></span></a>`

１．javascriptを利用したツールチップ

下のリンクにマウスを置いてみて下さい。すると、吹き出しのツールチップが現れます。これは、JavaScriptのBalloon tooltip(Balloon tooltip - dhtmlgoodies.com)を利用したものです。

ここにマウスを！

ダウンロードはここから。

　仕掛けは、まずdivでボックス(idがbubble_tooltip）を作っておき、そのバックグランドイメージとして吹き出しのイメージを付けています。次に、この吹き出しを隠しておいて、吹き出しを出したいリンクの上にマウスを重ねると（mouseover）、吹き出しをマウスポインター付近に表示するという形です。まずは、<head>の中で、bubble-tooltip.jsを組み込みます。これは、ルートにjsフォルダを作って入れておくのが一般的です。次に、バルーンなどのスタイルを決めるスタイルシート（bubble-tooltip.css）を読み込みます。これもルートにcssフォルダを作って入れておくのがいいでしょう。そして、バルーンの３つのイメージをルートにimagesフォルダを作って入れておきます。この場所はcssファイルにかかれているので、フォルダを変える場合はcssファイルを触らないといけません。

次に、吹き出しを前もって作っておくのに、
<div id="bubble_tooltip">
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content">Content is comming here as you probably can see.Content is comming here as you probably can see.</span></div>
<div class="bubble_bottom"></div>
</div>
をページのbody内に記述しておきます。私は一番最後にしました。そして、次に吹き出しのツールチップを付けたいリンクにおいて、
<a href="#" onmouseover="showToolTip(event,'吹き出しの内容');return false" onmouseout="hideToolTip()">ここにマウスを置いて下さい</a>
のように記述します。すると、ここにマウスを置いて下さいのリンクにマウスを重ねると吹き出しが現れます。そしてマウスを離すと、吹き出しが消えます。

２．CSSのみで行うツールチップ

下のリンクにマウスを置いてみて下さい。すると、吹き出しのツールチップが現れます。これは、CSS Bubble Tooltipsを利用したものです。

ここにマウスを！このようにツールチップが出現します。やや透明なので結構クールかも。

ダウンロードはここから(CSS Bubble Tooltips) 吹き出しのツールチップのhtmlファイルやイメージファイル(gif)をここからダウンロードしましょう。

　まずは、上のリンクより入り、csstooltipsのダウンロードをします。すると、csstooltips.zipというファイルが得られるので、解凍します。その中には、bubble.gifとbubble_filler.gif及びindex.htmlが入っています。前２つの画像ファイルは吹き出しを作るための画像ファイルですから、サイトのimagesフォルダにでも入れましょう。そして、index.htmlの中身を見ながら、自分に合うようにコピペをしていきます。結局は、<a>タグにおいて、ttというクラスを指定し、３つの<span>タグのうち、真ん中（middle)の<span>タグの間にツールチップで出したい文章を入れていきます。結構簡単ですが、クールなツールチップが完成します。