ツールチップ
動きをつけてツールチップを表示する
親譲りの無鉄砲で 小供の時から損ばかりしている。 に居る時分 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。別段深い理由でもない。 新築の二階から首を出していたら、 同級生の一人が冗談に、いくら威張っても、 そこから飛び降りる事は出来まい。弱虫やーい。 と囃したからである。
- 下にフェードインで表示する
- 下から反時計回りに振れて表示する
CODE
HTML
<p>親譲りの<span class="ttx wave fade" data-title="どうなるか先のことをよく考えず強引に事を行うこと">無鉄砲で</span> 小供の時から損ばかりしている。 <span class="ttx expand" data-title="義務教育の第一段階で、初等普通教育を施す学校">小学校</span>に居る時分 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな<span class="ttx wave swing" data-title="前後を考えずにふるまうさま">無闇</span>をしたと聞く人があるかも 知れぬ。別段深い理由でもない。 新築の二階から首を出していたら、 同級生の一人が冗談に、いくら威張っても、 そこから飛び降りる事は出来まい。弱虫やーい。 と囃したからである。
</p>
<ul>
<li class="ttx fade " data-title="classを'ttx fade'">下にフェードインで表示する</li>
<li class="ttx expand" data-title="classを'ttx expand'">横に伸びてから下に表示する</li>
<li class="ttx wave swing" data-title="classを'ttx wave swing'">下から反時計回りに振れて表示する</li>
</ul>
/* setup tooltips */
.ttx {
position: relative;
}
.ttx.wave {
text-decoration: wavy underline red;
}
.ttx.under {
text-decoration: underline red;
}
.ttx.dot {
text-decoration: underline dotted red;
}
.ttx:before,
.ttx:after {
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
}
.ttx:after {
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(0,0,128,.90);
border-left: 6px solid transparent;
content: '';
height: 0;
top: 20px;
left: 20px;
width: 0;
}
.ttx:before {
background: rgba(0,0,128,.90);
border-radius: 2px;
color: #fff;
content: attr(data-title);/*tooltipの中身*/
font-size: 100%;
padding: 6px 10px;
top: 26px;
white-space: nowrap;
}
/* the animations */
/* fade */
.ttx.fade:after,
.ttx.fade:before {
transform: translate3d(0,-10px,0);
transition: all .15s ease-in-out;
}
.ttx.fade:hover:after,
.ttx.fade:hover:before {
opacity: 1;
transform: translate3d(0,0,0);
}
/* expand */
.ttx.expand:before {
transform: scale3d(.2,.2,1);
transition: all .2s ease-in-out;
}
.ttx.expand:after {
transform: translate3d(0,6px,0);
transition: all .1s ease-in-out;
}
.ttx.expand:hover:before,
.ttx.expand:hover:after {
opacity: 1;
transform: scale3d(1,1,1);
}
.ttx.expand:hover:after {
transition: all .2s .1s ease-in-out;
}
/* swing */
.ttx.swing:before,
.ttx.swing:after {
transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
transform-origin: 0 0;
transition: transform .15s ease-in-out, opacity .2s;
}
.ttx.swing:after {
transform: translate3d(0,60px,0);
transition: transform .15s ease-in-out, opacity .2s;
}
.ttx.swing:hover:before,
.ttx.swing:hover:after {
opacity: 1;
transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
}
TooltipAnimationsを利用
Tooltip Animationsを利用
使い方の実例はhttps://tympanus.net/Development/TooltipAnimations/に掲載されています。http://tympanus.net/Development/TooltipAnimations/TooltipAnimations.zipでダウンロードできます。
Tooltip Animationsのサイト
(https://tympanus.net/Development/TooltipAnimations/ 使い方の詳しい説明がついています)
☆親譲りの 無鉄砲 どうなるか先のことをよく考えず強引に事を行うこと で 小供の時から損ばかりしている。 小学校 義務教育の第一段階で、初等普通教育を施す学校。修業年限は6年。学齢に達した満6歳から満12歳までの児童の就学が、学校教育法によって義務づけられている。 に居る時分 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。別段深い理由でもない。 新築の二階から首を出していたら、 同級生の一人が冗談に、いくら威張っても、 そこから飛び降りる事は出来まい。 弱虫 臆病な人、意気地のない人をあざけっていうときに用いる言葉。 やーい。 と囃した からである。
CODE
HTML
<p>☆親譲りの
<span class="grid__item"> <!--爆発風の表示-->
<span class="tooltip tooltip--malva" data-type="malva">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-malva">
<span class="tooltip__trigger-text">無鉄砲</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 94.9,90.2 101,30.7 163,72.3 229,17.7 263,68.2 319,55.9 315,102 375,144 316,175 340,228 265,220 251,263 180,233 143,282 98.9,218 57.5,236 82,189 25,170 82.8,141 48.7,93.7 Z"/>
</svg>
<span class="tooltip__content" id="info-malva">どうなるか先のことをよく考えず強引に事を行うこと</span>
</span>
</span>
</span>
で 小供の時から損ばかりしている。
<span class="grid__item"> <!--下から長方形が現れる-->
<span class="tooltip tooltip--indis" data-type="indis">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-indis">
<span class="tooltip__trigger-text">小学校</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 44.5,24 C 138,4.47 246,-6.47 356,24 367,26.9 376,32.9 376,44 L 376,256 C 376,267 367,279 356,276 231,240 168,241 44.5,276 33.8,279 24.5,267 24.5,256 L 24.5,44 C 24.5,32.9 33.6,26.3 44.5,24 Z"/>
</svg>
<span class="tooltip__content" id="info-indis">義務教育の第一段階で、初等普通教育を施す学校。修業年限は6年。学齢に達した満6歳から満12歳までの児童の就学が、学校教育法によって義務づけられている。</span>
</span>
</span>
</span>
に居る時分 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。別段深い理由でもない。
新築の二階から首を出していたら、 同級生の一人が冗談に、いくら威張っても、 そこから飛び降りる事は出来まい。
<span class="grid__item">
<span class="tooltip tooltip--hador" data-type="hador">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-hador">
<span class="tooltip__trigger-text">弱虫</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path class="path-hador-1" d="M 154,283 A 6.12,6.12 0 0 1 149,290 6.12,6.12 0 0 1 142,286 6.12,6.12 0 0 1 146,278 6.12,6.12 0 0 1 154,283 Z"/>
<path class="path-hador-2" d="M 167,265 A 7.83,7.83 0 0 1 162,276 7.83,7.83 0 0 1 152,270 7.83,7.83 0 0 1 157,261 7.83,7.83 0 0 1 167,265 Z"/>
<path class="path-hador-3" d="M 183,244 A 11.9,11.9 0 0 1 174,258 11.9,11.9 0 0 1 160,250 11.9,11.9 0 0 1 168,235 11.9,11.9 0 0 1 183,244 Z"/>
<path class="path-hador-4" d="M 327,120 A 127,111 0 0 1 200,231 127,111 0 0 1 72.9,120 127,111 0 0 1 200,9.44 127,111 0 0 1 327,120 Z"/>
</svg>
<span class="tooltip__content" id="info-hador">臆病な人、意気地のない人をあざけっていうときに用いる言葉。</span>
</span>
</span>
</span>
やーい。 と<a href="javascript:msg('囃す','<p>☆声をそろえてあざけったり、ほめそやしたりする。<br />「弱虫やあいと囃す」<br />「やんやと囃されて得意になる」</p>')">囃した</a>
からである。</p>
// 下記をbodyの下で読みこませておく！
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
// 下記を読みこませておく
<link rel="stylesheet" type="text/css" href="css/tooltipAc.css" />
TooltipAnimationsの様々な表示例
- 下から時計回りに回って丸い吹き出しで表示 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。
- 下から反時計回りに回って長円形の吹き出し表示 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。
- 長方形に表示 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。
- 下から四角形を吹き上げて表示 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。
- つぶれた長円形から長円形に変化し表示 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。
- 下から長方形が現れる 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。別段深い理由でもない。新築の二階から首を出していたら、 同級生の一人が冗談に、いくら威張っても、
- 下から▽のアクセントと共に表示 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。
- 雲形の中に表示 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。
- マンガ風の吹き出し 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。
- 爆発風に表示 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと
- 逆台形の囲み 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。
CODE
HTML
<span class="grid__item"> <!--下から時計回りに回って丸い吹き出しで表示-->
<span class="tooltip tooltip--cora" data-type="cora">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-cora">
<span class="tooltip__trigger-text">下から時計回りに回って丸い吹き出しで表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 199,21.9 C 152,22.2 109,35.7 78.8,57.4 48,79.1 29,109 29,142 29,172 45.9,201 73.6,222 101,243 140,258 183,260 189,270 200,282 200,282 200,282 211,270 217,260 261,258 299,243 327,222 354,201 371,172 371,142 371,109 352,78.7 321,57 290,35.3 247,21.9 199,21.9 Z"/>
</svg>
<span class="tooltip__content" id="info-cora">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span><!-- /tooltip__base -->
</span><!-- / tooltip -->
</span><!-- / grid__item -->
//下記をbodyの下位置で読みこんでおく
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip__trigger {
cursor: pointer;
position: relative;
}
.tooltip__trigger-text {
display: block;
color: /*black*/ #026acb;
/*padding: 0.85em;*/
pointer-events: none;
}
.tooltip__base {
position: absolute;
bottom: 2em;
left: 50%;
margin-left: -150px;
width: 300px;
height: 200px;
/* background-color:gray;*/
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.tooltip__content {
color: /*#4a4a4a*/ white;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 65%;
padding: 0 1em;
opacity: 0;
font-size: 0.85em;
/*background-color:gray;*/
}
.tooltip__shape,
.tooltip__deco {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* background-color:gray;*/
}
.tooltip__shape {
/*fill: #141514;*/
fill: firebrick;
}
/* Indivudual styles */
/* Cora */
.tooltip--cora .tooltip__base{
transform-origin: 50% 100%;
}
.tooltip--cora .tooltip__content {
margin-bottom: 1em;
}
/* Smaug */
.tooltip--smaug .tooltip__base {
bottom: -0.5em;
transform-origin: 50% 100%;
}
.tooltip--smaug .tooltip__content {
padding: 0;
}
/* Cora */
.tooltip--cora .tooltip__base{
transform-origin: 50% 100%;
}
.tooltip--cora .tooltip__content {
margin-bottom: 1em;
}
CODE
HTML
<span class="grid__item"> <!--下から反時計回りに回って長円形の吹き出し表示-->
<span class="tooltip tooltip--smaug" data-type="smaug">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-smaug">
<span class="tooltip__trigger-text">下から反時計回りに回って長円形の吹き出し表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 314,100 C 313,100 312,100 311,100 L 89.5,100 C 55.9,100 29.1,121 29.1,150 29.1,178 53.1,201 89.5,201 L 184,201 200,223 217,201 311,201 C 344,201 371,178 371,150 371,122 346,99 314,100 Z"/>
</svg>
<span class="tooltip__content" id="info-smaug">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 </span>
</span>
</span>
</span>
//下記をbodyの下位置で読みこんでおく
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip__trigger {
cursor: pointer;
position: relative;
}
.tooltip__trigger-text {
display: block;
color: /*black*/ #026acb;
/*padding: 0.85em;*/
pointer-events: none;
}
.tooltip__base {
position: absolute;
bottom: 2em;
left: 50%;
margin-left: -150px;
width: 300px;
height: 200px;
/* background-color:gray;*/
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.tooltip__content {
color: /*#4a4a4a*/ white;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 65%;
padding: 0 1em;
opacity: 0;
font-size: 0.85em;
/*background-color:gray;*/
}
.tooltip__shape,
.tooltip__deco {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* background-color:gray;*/
}
.tooltip__shape {
/*fill: #141514;*/
fill: firebrick;
}
/* Smaug */
.tooltip--smaug .tooltip__base {
bottom: -0.5em;
transform-origin: 50% 100%;
}
.tooltip--smaug .tooltip__content {
padding: 0;
}
CODE
HTML
<span class="grid__item"> <!--長方形に表示-->
<span class="tooltip tooltip--uldor" data-type="uldor">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-uldor">
<span class="tooltip__trigger-text">長方形に表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 79.5,66 C 79.5,66 128,106 202,105 276,104 321,66 321,66 321,66 287,84 288,155 289,226 318,232 318,232 318,232 258,198 200,198 142,198 80.5,230 80.5,230 80.5,230 112,222 111,152 110,82 79.5,66 79.5,66 Z"/>
</svg>
<span class="tooltip__content" id="info-uldor">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
//下記をbodyの下位置で読みこんでおく
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip__trigger {
cursor: pointer;
position: relative;
}
.tooltip__trigger-text {
display: block;
color: /*black*/ #026acb;
/*padding: 0.85em;*/
pointer-events: none;
}
.tooltip__base {
position: absolute;
bottom: 2em;
left: 50%;
margin-left: -150px;
width: 300px;
height: 200px;
/* background-color:gray;*/
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.tooltip__content {
color: /*#4a4a4a*/ white;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 65%;
padding: 0 1em;
opacity: 0;
font-size: 0.85em;
/*background-color:gray;*/
}
.tooltip__shape,
.tooltip__deco {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* background-color:gray;*/
}
.tooltip__shape {
/*fill: #141514;*/
fill: firebrick;
}
CODE
HTML
<span class="grid__item"> <!--下から四角形を吹き上げる動きで表示-->
<span class="tooltip tooltip--dori" data-type="dori">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-dori">
<span class="tooltip__trigger-text">下から四角形を吹き上げて表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 22,108 22,236 C 22,236 64,216 103,212 142,208 184,212 184,212 L 200,229 216,212 C 216,212 258,207 297,212 336,217 378,236 378,236 L 378,108 C 378,108 318,83.7 200,83.7 82,83.7 22,108 22,108 Z"/>
</svg>
<span class="tooltip__content" id="info-dori">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
//下記をbodyの下位置で読みこんでおく
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip__trigger {
cursor: pointer;
position: relative;
}
.tooltip__trigger-text {
display: block;
color: /*black*/ #026acb;
/*padding: 0.85em;*/
pointer-events: none;
}
.tooltip__base {
position: absolute;
bottom: 2em;
left: 50%;
margin-left: -150px;
width: 300px;
height: 200px;
/* background-color:gray;*/
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.tooltip__content {
color: /*#4a4a4a*/ white;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 65%;
padding: 0 1em;
opacity: 0;
font-size: 0.85em;
/*background-color:gray;*/
}
.tooltip__shape,
.tooltip__deco {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* background-color:gray;*/
}
.tooltip__shape {
/*fill: #141514;*/
fill: firebrick;
}
/* Dori */
.tooltip--dori .tooltip__base {
bottom: -0.5em;
}
.tooltip--dori .tooltip__content {
margin: 0 0 1em;
}
CODE
HTML
<span class="grid__item"> <!--つぶれた長円形から長円形に変化し表示-->
<span class="tooltip tooltip--gram" data-type="gram">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-gram">
<span class="tooltip__trigger-text">つぶれた長円形から長円形に変化し表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 92.4,79 C 136,79 154,115 200,116 246,117 263,80.4 308,79 353,77.6 381,111 381,150 381,189 346,220 308,221 270,222 236,188 200,188 164,188 130,222 92.4,221 54.4,220 19,189 19,150 19,111 48.6,79 92.4,79 Z"/>
</svg>
<span class="tooltip__content" id="info-gram">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
//下記をbodyの下位置で読みこんでおく
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip__trigger {
cursor: pointer;
position: relative;
}
.tooltip__trigger-text {
display: block;
color: /*black*/ #026acb;
/*padding: 0.85em;*/
pointer-events: none;
}
.tooltip__base {
position: absolute;
bottom: 2em;
left: 50%;
margin-left: -150px;
width: 300px;
height: 200px;
/* background-color:gray;*/
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.tooltip__content {
color: /*#4a4a4a*/ white;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 65%;
padding: 0 1em;
opacity: 0;
font-size: 0.85em;
/*background-color:gray;*/
}
.tooltip__shape,
.tooltip__deco {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* background-color:gray;*/
}
.tooltip__shape {
/*fill: #141514;*/
fill: firebrick;
}
/* Gram */
.tooltip--gram .tooltip__base {
bottom: -0.5em;
}
CODE
HTML
<span class="grid__item"> <!--下から長方形が現れる-->
<span class="tooltip tooltip--indis" data-type="indis">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-indis">
<span class="tooltip__trigger-text">下から長方形が現れる</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 44.5,24 C 138,4.47 246,-6.47 356,24 367,26.9 376,32.9 376,44 L 376,256 C 376,267 367,279 356,276 231,240 168,241 44.5,276 33.8,279 24.5,267 24.5,256 L 24.5,44 C 24.5,32.9 33.6,26.3 44.5,24 Z"/>
</svg>
<span class="tooltip__content" id="info-indis">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。別段深い理由でもない。新築の二階から首を出していたら、 同級生の一人が冗談に、いくら威張っても、 </span>
</span>
</span>
</span>
//下記をbodyの下位置で読みこんでおく
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip__trigger {
cursor: pointer;
position: relative;
}
.tooltip__trigger-text {
display: block;
color: /*black*/ #026acb;
/*padding: 0.85em;*/
pointer-events: none;
}
.tooltip__base {
position: absolute;
bottom: 2em;
left: 50%;
margin-left: -150px;
width: 300px;
height: 200px;
/* background-color:gray;*/
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.tooltip__content {
color: /*#4a4a4a*/ white;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 65%;
padding: 0 1em;
opacity: 0;
font-size: 0.85em;
/*background-color:gray;*/
}
.tooltip__shape,
.tooltip__deco {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* background-color:gray;*/
}
.tooltip__shape {
/*fill: #141514;*/
fill: firebrick;
}
CODE
HTML
<span class="grid__item"> <!--下から▽のアクセントを表示-->
<span class="tooltip tooltip--narvi" data-type="narvi">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-narvi">
<span class="tooltip__trigger-text">下から▽のアクセントと共に表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path class="path-narvi" d="M 307,150 199,212 92.5,274 92.7,150 92.5,26.2 200,88.4 Z"/>
</svg>
<span class="tooltip__content" id="info-narvi" style="color:blue;background-color:yellow;">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
//下記をbodyの下位置で読みこんでおく
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip__trigger {
cursor: pointer;
position: relative;
}
.tooltip__trigger-text {
display: block;
color: /*black*/ #026acb;
/*padding: 0.85em;*/
pointer-events: none;
}
.tooltip__base {
position: absolute;
bottom: 2em;
left: 50%;
margin-left: -150px;
width: 300px;
height: 200px;
/* background-color:gray;*/
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.tooltip__content {
color: /*#4a4a4a*/ white;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 65%;
padding: 0 1em;
opacity: 0;
font-size: 0.85em;
/*background-color:gray;*/
}
.tooltip__shape,
.tooltip__deco {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* background-color:gray;*/
}
.tooltip__shape {
/*fill: #141514;*/
fill: firebrick;
}
/* Narvi */
.path-narvi {
transform-origin: 200px 150px;
}
.tooltip--narvi .tooltip__content {
width: 80%;
}
CODE
HTML
<span class="grid__item"> <!--雲形の中に表示-->
<span class="tooltip tooltip--amras" data-type="amras">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-amras">
<span class="tooltip__trigger-text">雲形の中に表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path class="path-amras-2" d="M 293,106 A 90.1,90.1 0 0 1 203,197 90.1,90.1 0 0 1 112,106 90.1,90.1 0 0 1 203,16.2 90.1,90.1 0 0 1 293,106 Z"/>
<path class="path-amras-3" d="M 324,66.2 A 46.9,46.9 0 0 1 277,113 46.9,46.9 0 0 1 230,66.2 46.9,46.9 0 0 1 277,19.3 46.9,46.9 0 0 1 324,66.2 Z"/>
<path class="path-amras-1" d="M 180,111 A 67.2,67.2 0 0 1 112,178 67.2,67.2 0 0 1 45.9,111 67.2,67.2 0 0 1 112,43.5 67.2,67.2 0 0 1 180,111 Z"/>
<path class="path-amras-4" d="M 371,98.6 A 52.7,52.7 0 0 1 318,152 52.7,52.7 0 0 1 266,98.6 52.7,52.7 0 0 1 318,45.9 52.7,52.7 0 0 1 371,98.6 Z"/>
<path class="path-amras-9" d="M 375,167 A 66.8,55.1 0 0 1 308,222 66.8,55.1 0 0 1 241,167 66.8,55.1 0 0 1 308,112 66.8,55.1 0 0 1 375,167 Z"/>
<path class="path-amras-5" d="M 187,199 A 52,52 0 0 1 136,251 52,52 0 0 1 84.1,199 52,52 0 0 1 136,147 52,52 0 0 1 187,199 Z"/>
<path class="path-amras-6" d="M 287,217 A 66.8,66.8 0 0 1 221,284 66.8,66.8 0 0 1 154,217 66.8,66.8 0 0 1 221,150 66.8,66.8 0 0 1 287,217 Z"/>
<path class="path-amras-7" d="M 132,168 A 53.9,53.9 0 0 1 78.7,222 53.9,53.9 0 0 1 24.8,168 53.9,53.9 0 0 1 78.7,114 53.9,53.9 0 0 1 132,168 Z"/>
<path class="path-amras-8" d="M 343,211 A 48.7,48.7 0 0 1 295,260 48.7,48.7 0 0 1 246,211 48.7,48.7 0 0 1 295,163 48.7,48.7 0 0 1 343,211 Z"/>
</svg>
<span class="tooltip__content" id="info-amras">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
//下記をbodyの下位置で読みこんでおく
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip__trigger {
cursor: pointer;
position: relative;
}
.tooltip__trigger-text {
display: block;
color: /*black*/ #026acb;
/*padding: 0.85em;*/
pointer-events: none;
}
.tooltip__base {
position: absolute;
bottom: 2em;
left: 50%;
margin-left: -150px;
width: 300px;
height: 200px;
/* background-color:gray;*/
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.tooltip__content {
color: /*#4a4a4a*/ white;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 65%;
padding: 0 1em;
opacity: 0;
font-size: 0.85em;
/*background-color:gray;*/
}
.tooltip__shape,
.tooltip__deco {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* background-color:gray;*/
}
.tooltip__shape {
/*fill: #141514;*/
fill: firebrick;
}
/* Amras */
.path-amras-1 {
transform-origin: 115px 111px;
}
.path-amras-2 {
transform-origin: 204px 107px;
}
.path-amras-3 {
transform-origin: 279px 66px;
}
.path-amras-4 {
transform-origin: 320px 99px;
}
.path-amras-5 {
transform-origin: 137px 199px;
}
.path-amras-6 {
transform-origin: 222px 217px;
}
.path-amras-7 {
transform-origin: 80px 168px;
}
.path-amras-8 {
transform-origin: 296px 211px;
}
.path-amras-9 {
transform-origin: 310px 167px;
}
CODE
HTML
<span class="grid__item"> <!--マンガの吹き出し風-->
<span class="tooltip tooltip--hador" data-type="hador">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-hador">
<span class="tooltip__trigger-text">マンガ風の吹き出し</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path class="path-hador-1" d="M 154,283 A 6.12,6.12 0 0 1 149,290 6.12,6.12 0 0 1 142,286 6.12,6.12 0 0 1 146,278 6.12,6.12 0 0 1 154,283 Z"/>
<path class="path-hador-2" d="M 167,265 A 7.83,7.83 0 0 1 162,276 7.83,7.83 0 0 1 152,270 7.83,7.83 0 0 1 157,261 7.83,7.83 0 0 1 167,265 Z"/>
<path class="path-hador-3" d="M 183,244 A 11.9,11.9 0 0 1 174,258 11.9,11.9 0 0 1 160,250 11.9,11.9 0 0 1 168,235 11.9,11.9 0 0 1 183,244 Z"/>
<path class="path-hador-4" d="M 327,120 A 127,111 0 0 1 200,231 127,111 0 0 1 72.9,120 127,111 0 0 1 200,9.44 127,111 0 0 1 327,120 Z"/>
</svg>
<span class="tooltip__content" id="info-hador">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 </span>
</span>
</span>
</span>
//下記をbodyの下位置で読みこんでおく
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip__trigger {
cursor: pointer;
position: relative;
}
.tooltip__trigger-text {
display: block;
color: /*black*/ #026acb;
/*padding: 0.85em;*/
pointer-events: none;
}
.tooltip__base {
position: absolute;
bottom: 2em;
left: 50%;
margin-left: -150px;
width: 300px;
height: 200px;
/* background-color:gray;*/
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.tooltip__content {
color: /*#4a4a4a*/ white;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 65%;
padding: 0 1em;
opacity: 0;
font-size: 0.85em;
/*background-color:gray;*/
}
.tooltip__shape,
.tooltip__deco {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* background-color:gray;*/
}
.tooltip__shape {
/*fill: #141514;*/
fill: firebrick;
}
/* Hador */
.tooltip--hador .tooltip__base {
bottom: 2.25em;
margin-left: -115px;
}
.path-hador-1 {
transform-origin: 148px 284px;
}
.path-hador-2 {
transform-origin: 160px 268px;
}
.path-hador-3 {
transform-origin: 171px 246px;
}
.path-hador-4 {
transform-origin: 200px 120px;
}
.tooltip--hador .tooltip__content {
width: 50%;
margin: 0 0 2.5em;
}
CODE
HTML
<span class="tooltip tooltip--malva" data-type="malva">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-malva">
<span class="tooltip__trigger-text">爆発風に表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 94.9,90.2 101,30.7 163,72.3 229,17.7 263,68.2 319,55.9 315,102 375,144 316,175 340,228 265,220 251,263 180,233 143,282 98.9,218 57.5,236 82,189 25,170 82.8,141 48.7,93.7 Z"/>
</svg>
<span class="tooltip__content" id="info-malva">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと</span>
</span>
</span>
</span>
//下記をbodyの下位置で読みこんでおく
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip__trigger {
cursor: pointer;
position: relative;
}
.tooltip__trigger-text {
display: block;
color: /*black*/ #026acb;
/*padding: 0.85em;*/
pointer-events: none;
}
.tooltip__base {
position: absolute;
bottom: 2em;
left: 50%;
margin-left: -150px;
width: 300px;
height: 200px;
/* background-color:gray;*/
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.tooltip__content {
color: /*#4a4a4a*/ white;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 65%;
padding: 0 1em;
opacity: 0;
font-size: 0.85em;
/*background-color:gray;*/
}
.tooltip__shape,
.tooltip__deco {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* background-color:gray;*/
}
.tooltip__shape {
/*fill: #141514;*/
fill: firebrick;
}
/* Malva */
.tooltip--malva .tooltip__content {
width: 50%;
}
CODE
HTML
<span class="grid__item"> <!--逆台形の囲み-->
<span class="tooltip tooltip--sadoc" data-type="sadoc">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-sadoc">
<span class="tooltip__trigger-text">逆台形の囲み</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 32.1,42.7 54.5,257 185,257 193,269 200,282 207,269 214,257 342,257 368,23.9 Z"/>
</svg>
<span class="tooltip__content" id="info-sadoc">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
//下記をbodyの下位置で読みこんでおく
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip__trigger {
cursor: pointer;
position: relative;
}
.tooltip__trigger-text {
display: block;
color: /*black*/ #026acb;
/*padding: 0.85em;*/
pointer-events: none;
}
.tooltip__base {
position: absolute;
bottom: 2em;
left: 50%;
margin-left: -150px;
width: 300px;
height: 200px;
/* background-color:gray;*/
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.tooltip__content {
color: /*#4a4a4a*/ white;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 65%;
padding: 0 1em;
opacity: 0;
font-size: 0.85em;
/*background-color:gray;*/
}
.tooltip__shape,
.tooltip__deco {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* background-color:gray;*/
}
.tooltip__shape {
/*fill: #141514;*/
fill: firebrick;
}
/* Sadoc */
.tooltip--sadoc .tooltip__base {
bottom: 2.5em;
}
.tooltip--sadoc .tooltip__shape path {
fill: #1d1f1e;
/*fill: firebrick;*/
stroke: #5a5c5b;
/*stroke: firebrick;*/
stroke-width: 3px;
}
HTML
<p>☆<a href="#" title="親から財産や名跡、性質などを受け継ぐこと。">親譲り</a>の
<span class="grid__item"> <!--爆発風の表示-->
<span class="tooltip tooltip--malva" data-type="malva">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-malva">
<span class="tooltip__trigger-text">無鉄砲</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 94.9,90.2 101,30.7 163,72.3 229,17.7 263,68.2 319,55.9 315,102 375,144 316,175 340,228 265,220 251,263 180,233 143,282 98.9,218 57.5,236 82,189 25,170 82.8,141 48.7,93.7 Z"/>
</svg>
<span class="tooltip__content" id="info-malva">どうなるか先のことをよく考えず強引に事を行うこと</span>
</span>
</span>
</span>
で 小供の時から損ばかりしている。
<span class="grid__item"> <!--下から長方形が現れる-->
<span class="tooltip tooltip--indis" data-type="indis">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-indis">
<span class="tooltip__trigger-text">小学校</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 44.5,24 C 138,4.47 246,-6.47 356,24 367,26.9 376,32.9 376,44 L 376,256 C 376,267 367,279 356,276 231,240 168,241 44.5,276 33.8,279 24.5,267 24.5,256 L 24.5,44 C 24.5,32.9 33.6,26.3 44.5,24 Z"/>
</svg>
<span class="tooltip__content" id="info-indis">義務教育の第一段階で、初等普通教育を施す学校。修業年限は6年。学齢に達した満6歳から満12歳までの児童の就学が、学校教育法によって義務づけられている。</span>
</span>
</span>
</span>
に居る時分 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな<a href="#" title="前後を考えずにふるまうさま。">無闇</a>をしたと聞く人があるかも 知れぬ。別段深い理由でもない。
新築の二階から首を出していたら、 同級生の一人が冗談に、いくら威張っても、 そこから飛び降りる事は出来まい。
<span class="grid__item">
<span class="tooltip tooltip--hador" data-type="hador">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-hador">
<span class="tooltip__trigger-text">弱虫</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path class="path-hador-1" d="M 154,283 A 6.12,6.12 0 0 1 149,290 6.12,6.12 0 0 1 142,286 6.12,6.12 0 0 1 146,278 6.12,6.12 0 0 1 154,283 Z"/>
<path class="path-hador-2" d="M 167,265 A 7.83,7.83 0 0 1 162,276 7.83,7.83 0 0 1 152,270 7.83,7.83 0 0 1 157,261 7.83,7.83 0 0 1 167,265 Z"/>
<path class="path-hador-3" d="M 183,244 A 11.9,11.9 0 0 1 174,258 11.9,11.9 0 0 1 160,250 11.9,11.9 0 0 1 168,235 11.9,11.9 0 0 1 183,244 Z"/>
<path class="path-hador-4" d="M 327,120 A 127,111 0 0 1 200,231 127,111 0 0 1 72.9,120 127,111 0 0 1 200,9.44 127,111 0 0 1 327,120 Z"/>
</svg>
<span class="tooltip__content" id="info-hador">臆病な人、意気地のない人をあざけっていうときに用いる言葉。</span>
</span>
</span>
</span>
やーい。 と<a href="javascript:msg('囃す','<p>☆声をそろえてあざけったり、ほめそやしたりする。<br />「弱虫やあいと囃す」<br />「やんやと囃されて得意になる」</p>')">囃した</a>
からである。</p>
<ul>
<li>
<span class="grid__item"> <!--下から時計回りに回って丸い吹き出しで表示-->
<span class="tooltip tooltip--cora" data-type="cora">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-cora">
<span class="tooltip__trigger-text">下から時計回りに回って丸い吹き出しで表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 199,21.9 C 152,22.2 109,35.7 78.8,57.4 48,79.1 29,109 29,142 29,172 45.9,201 73.6,222 101,243 140,258 183,260 189,270 200,282 200,282 200,282 211,270 217,260 261,258 299,243 327,222 354,201 371,172 371,142 371,109 352,78.7 321,57 290,35.3 247,21.9 199,21.9 Z"/>
</svg>
<span class="tooltip__content" id="info-cora">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span><!-- /tooltip__base -->
</span><!-- / tooltip -->
</span><!-- / grid__item -->
</li>
<li>
<span class="grid__item"> <!--下から反時計回りに回って長円形の吹き出し表示-->
<span class="tooltip tooltip--smaug" data-type="smaug">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-smaug">
<span class="tooltip__trigger-text">下から反時計回りに回って長円形の吹き出し表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 314,100 C 313,100 312,100 311,100 L 89.5,100 C 55.9,100 29.1,121 29.1,150 29.1,178 53.1,201 89.5,201 L 184,201 200,223 217,201 311,201 C 344,201 371,178 371,150 371,122 346,99 314,100 Z"/>
</svg>
<span class="tooltip__content" id="info-smaug">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
</li>
<li>
<span class="grid__item"> <!--長方形に表示-->
<span class="tooltip tooltip--uldor" data-type="uldor">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-uldor">
<span class="tooltip__trigger-text">長方形に表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 79.5,66 C 79.5,66 128,106 202,105 276,104 321,66 321,66 321,66 287,84 288,155 289,226 318,232 318,232 318,232 258,198 200,198 142,198 80.5,230 80.5,230 80.5,230 112,222 111,152 110,82 79.5,66 79.5,66 Z"/>
</svg>
<span class="tooltip__content" id="info-uldor">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
</li>
<li>
<span class="grid__item"> <!--下から四角形を吹き上げる動きで表示-->
<span class="tooltip tooltip--dori" data-type="dori">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-dori">
<span class="tooltip__trigger-text">下から四角形を吹き上げて表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 22,108 22,236 C 22,236 64,216 103,212 142,208 184,212 184,212 L 200,229 216,212 C 216,212 258,207 297,212 336,217 378,236 378,236 L 378,108 C 378,108 318,83.7 200,83.7 82,83.7 22,108 22,108 Z"/>
</svg>
<span class="tooltip__content" id="info-dori">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
</li>
<li>
<span class="grid__item"> <!--つぶれた長円形から長円形に変化し表示-->
<span class="tooltip tooltip--gram" data-type="gram">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-gram">
<span class="tooltip__trigger-text">つぶれた長円形から長円形に変化し表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 92.4,79 C 136,79 154,115 200,116 246,117 263,80.4 308,79 353,77.6 381,111 381,150 381,189 346,220 308,221 270,222 236,188 200,188 164,188 130,222 92.4,221 54.4,220 19,189 19,150 19,111 48.6,79 92.4,79 Z"/>
</svg>
<span class="tooltip__content" id="info-gram">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
</li>
<li>
<span class="grid__item"> <!--下から長方形が現れる-->
<span class="tooltip tooltip--indis" data-type="indis">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-indis">
<span class="tooltip__trigger-text">下から長方形が現れる</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 44.5,24 C 138,4.47 246,-6.47 356,24 367,26.9 376,32.9 376,44 L 376,256 C 376,267 367,279 356,276 231,240 168,241 44.5,276 33.8,279 24.5,267 24.5,256 L 24.5,44 C 24.5,32.9 33.6,26.3 44.5,24 Z"/>
</svg>
<span class="tooltip__content" id="info-indis">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
</li>
<li>
<span class="grid__item"> <!--下から▽のアクセントを表示-->
<span class="tooltip tooltip--narvi" data-type="narvi">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-narvi">
<span class="tooltip__trigger-text">下から▽のアクセントと共に表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path class="path-narvi" d="M 307,150 199,212 92.5,274 92.7,150 92.5,26.2 200,88.4 Z"/>
</svg>
<span class="tooltip__content" id="info-narvi" style="color:blue;background-color:yellow;">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
</li>
<li>
<span class="grid__item"> <!--雲形の中に表示-->
<span class="tooltip tooltip--amras" data-type="amras">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-amras">
<span class="tooltip__trigger-text">雲形の中に表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path class="path-amras-2" d="M 293,106 A 90.1,90.1 0 0 1 203,197 90.1,90.1 0 0 1 112,106 90.1,90.1 0 0 1 203,16.2 90.1,90.1 0 0 1 293,106 Z"/>
<path class="path-amras-3" d="M 324,66.2 A 46.9,46.9 0 0 1 277,113 46.9,46.9 0 0 1 230,66.2 46.9,46.9 0 0 1 277,19.3 46.9,46.9 0 0 1 324,66.2 Z"/>
<path class="path-amras-1" d="M 180,111 A 67.2,67.2 0 0 1 112,178 67.2,67.2 0 0 1 45.9,111 67.2,67.2 0 0 1 112,43.5 67.2,67.2 0 0 1 180,111 Z"/>
<path class="path-amras-4" d="M 371,98.6 A 52.7,52.7 0 0 1 318,152 52.7,52.7 0 0 1 266,98.6 52.7,52.7 0 0 1 318,45.9 52.7,52.7 0 0 1 371,98.6 Z"/>
<path class="path-amras-9" d="M 375,167 A 66.8,55.1 0 0 1 308,222 66.8,55.1 0 0 1 241,167 66.8,55.1 0 0 1 308,112 66.8,55.1 0 0 1 375,167 Z"/>
<path class="path-amras-5" d="M 187,199 A 52,52 0 0 1 136,251 52,52 0 0 1 84.1,199 52,52 0 0 1 136,147 52,52 0 0 1 187,199 Z"/>
<path class="path-amras-6" d="M 287,217 A 66.8,66.8 0 0 1 221,284 66.8,66.8 0 0 1 154,217 66.8,66.8 0 0 1 221,150 66.8,66.8 0 0 1 287,217 Z"/>
<path class="path-amras-7" d="M 132,168 A 53.9,53.9 0 0 1 78.7,222 53.9,53.9 0 0 1 24.8,168 53.9,53.9 0 0 1 78.7,114 53.9,53.9 0 0 1 132,168 Z"/>
<path class="path-amras-8" d="M 343,211 A 48.7,48.7 0 0 1 295,260 48.7,48.7 0 0 1 246,211 48.7,48.7 0 0 1 295,163 48.7,48.7 0 0 1 343,211 Z"/>
</svg>
<span class="tooltip__content" id="info-amras">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
</li>
<li>
<span class="grid__item"> <!--マンガの吹き出し風-->
<span class="tooltip tooltip--hador" data-type="hador">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-hador">
<span class="tooltip__trigger-text">マンガ風の吹き出し</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path class="path-hador-1" d="M 154,283 A 6.12,6.12 0 0 1 149,290 6.12,6.12 0 0 1 142,286 6.12,6.12 0 0 1 146,278 6.12,6.12 0 0 1 154,283 Z"/>
<path class="path-hador-2" d="M 167,265 A 7.83,7.83 0 0 1 162,276 7.83,7.83 0 0 1 152,270 7.83,7.83 0 0 1 157,261 7.83,7.83 0 0 1 167,265 Z"/>
<path class="path-hador-3" d="M 183,244 A 11.9,11.9 0 0 1 174,258 11.9,11.9 0 0 1 160,250 11.9,11.9 0 0 1 168,235 11.9,11.9 0 0 1 183,244 Z"/>
<path class="path-hador-4" d="M 327,120 A 127,111 0 0 1 200,231 127,111 0 0 1 72.9,120 127,111 0 0 1 200,9.44 127,111 0 0 1 327,120 Z"/>
</svg>
<span class="tooltip__content" id="info-hador">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 </span>
</span>
</span>
</span>
</li>
<li>
<span class="tooltip tooltip--malva" data-type="malva">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-malva">
<span class="tooltip__trigger-text">爆発風に表示</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 94.9,90.2 101,30.7 163,72.3 229,17.7 263,68.2 319,55.9 315,102 375,144 316,175 340,228 265,220 251,263 180,233 143,282 98.9,218 57.5,236 82,189 25,170 82.8,141 48.7,93.7 Z"/>
</svg>
<span class="tooltip__content" id="info-malva">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
</li>
<li>
<span class="grid__item"> <!--逆台形の囲み-->
<span class="tooltip tooltip--sadoc" data-type="sadoc">
<span class="tooltip__trigger" role="tooltip" aria-describedby="info-sadoc">
<span class="tooltip__trigger-text">逆台形の囲み</span>
</span>
<span class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 32.1,42.7 54.5,257 185,257 193,269 200,282 207,269 214,257 342,257 368,23.9 Z"/>
</svg>
<span class="tooltip__content" id="info-sadoc">学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。</span>
</span>
</span>
</span>
</li>
</ul>
//下記をbodyの下位置で読みこんでおく
<script src="tooltipA/js/anime.min.js"></script>
<script src="tooltipA/js/charming.min.js"></script>
<script src="tooltipA/js/main.js"></script>
//下記を読みこむ
<link rel="stylesheet" type="text/css" href="css/tooltipAc.css" />