ブログなどで便利に使えるTooltip（漫画風ふきだし）を作ってみました。
Tooltipライブラリもあるが、javascriptで行う為、設定が若干手間がかかるのを、CSS読み込みとclass名の設定だけでセットできるようにしてみました。
ちなみに、tooltipで表示する文言は、対象エレメントに「data-msg」という属性をそのまま表示できるようにしたので、見た目を汚さずにセットできるようにしてあります。
ソースコード
サンプル用のindex.htmlとライブラリ用のcssファイルを載せておきます。
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tooltip</title>
<style>
.element{
display:block;
width:100px;
height:100px;
border:1px solid black;
background-color:#DDD;
margin:20px;
margin-left:200px;
}
.tooltip1{
border:1px solid red;
}
</style>
<link rel="stylesheet" href="tooltip.css">
</head>
<body>
<h1>Tooltip</h1>
<div class="element tooltip-right" data-msg="右側にHELPを
表示します。"></div>
<div class="element tooltip-left" data-msg="左側にHELPを表示します。"></div>
<div class="element tooltip-top" data-msg="上側にHELPを表示します。"></div>
<div class="element tooltip-bottom" data-msg="下側にHELPを表示します。"></div>
</body>
</html>
.tooltip-right:hover{
opacity:0.7;
cursor:help;
position:relative;
}
.tooltip-right:hover:before{
content:attr(data-msg);
display: inline-block;
position: absolute;
top : 0;
left : calc(100% + 12px);
font-size: 12px;
color: white;
background-color: #484848;
min-width : 100px;
max-width : 300px;
width : auto;
min-height: 16px;
padding: 8px;
border-radius:4px;
white-space:pre;
}
.tooltip-right:hover:after{
content:"";
display:block;
position:absolute;
height : 0;
width : 0;
top : calc(10% + 8px);
left : calc(100% + 12px - 10px);
border-right-width:0;
border-style: solid;
border-width: 12px 0 12px 12px;
border-color: #484848 transparent transparent transparent;
}
.tooltip-left:hover{
opacity:0.7;
cursor:help;
position:relative;
}
.tooltip-left:hover:before{
content:attr(data-msg);
display: block;
position: absolute;
top : 10%;
right : calc(100% + 12px);
font-size: 12px;
color: white;
background-color: #484848;
min-width: 100px;
max-width: 300px;
min-height: 16px;
padding: 8px;
border-radius:4px;
white-space:pre;
}
.tooltip-left:hover:after{
content:"";
display:block;
position:absolute;
height : 0;
width : 0;
top : calc(10% + 8px);
right : calc(100% + 12px - 10px);
border-right-width:0;
border-style: solid;
border-width: 12px 12px 12px 0;
border-color: #484848 transparent transparent transparent;
}
.tooltip-top:hover{
opacity:0.7;
cursor:help;
position:relative;
}
.tooltip-top:hover:before{
content:attr(data-msg);
display: block;
position: absolute;
bottom : calc(100% + 12px);
left : 4px;
font-size: 12px;
color: white;
background-color: #484848;
min-width: 100px;
max-width: 300px;
min-height: 16px;
padding: 8px;
border-radius:4px;
white-space:pre;
}
.tooltip-top:hover:after{
content:"";
display:block;
position:absolute;
height : 0;
width : 0;
bottom : calc(100% + 12px - 10px);
left : calc(4px + 8px);
border-right-width:0;
border-style: solid;
border-width: 0 12px 12px 12px;
border-color: transparent #484848 transparent transparent;
}
.tooltip-bottom:hover{
opacity:0.7;
cursor:help;
position:relative;
}
.tooltip-bottom:hover:before{
content:attr(data-msg);
display: block;
position: absolute;
top : calc(100% + 12px);
left : 4px;
font-size: 12px;
color: white;
background-color: #484848;
min-width: 100px;
max-width: 300px;
min-height: 16px;
padding: 8px;
border-radius:4px;
white-space:pre;
}
.tooltip-bottom:hover:after{
content:"";
display:block;
position:absolute;
height : 0;
width : 0;
top : calc(100% + 12px - 10px);
left : calc(4px + 8px);
border-right-width:0;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: transparent #484848 transparent transparent;
}
使い方と解説
index.htmlソースを見るとわかりますが、上下左右の４方向にtooltipを出し分けるようにしています。
出し分けは下記クラス名を対象のタグにセットするだけです。
上に表示 : 「tooltip-top」
下に表示 : 「tooltip-bottom」
右に表示 : 「tooltip-right」
左に表示 : 「tooltip-left」
tooltipは文字数に応じて変動します。
※改行をしたい場合は、文字列の中で実際に改行させて使用して下さい。（tooltip-left参照）
対象タグはposition:relative;のスタイルが適用されるので、既存でabsoluteやfixedの要素になっている場合は、内側にネストさせて行う仕組みを作る必要があります。
tooltip内に画像を表示したい場合は今回のバージョンでは対応していません。
こういう場合はJSで対応する必要があります。
サンプル
※それぞれの四角にマウスカーソルを乗せてみてください。
0 件のコメント:
コメントを投稿