js無しでtooltip+effect

GeckoTang

2010-07-20 13:54:59

License: MIT License

Fork: 1

Fav: 5

View: 1752

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 11 lines
CSS 108 lines

js無しでtooltip+effect
jQuery v1.4.2

js無しでtooltip+effect

body { background-color: #fff; font: 30px sans-serif; font-size:12px;}
p{ line-height:1.4;}

.tooltip{
  position:relative;
  display:inline-block;
  border-bottom:3px double #000;
}
.tooltip:hover{
  position:relative;
}
.tooltip b{
  position:absolute;
  top:0;
  left:0;
  z-index:999;
}
/*
 *  tooltip 1
 */
.tooltip:hover b{
  opacity:0;
  background:#000;
  width:0px;
  height:0px;
  top:130%;
  font-weight:normal;
  display:inline-block;
  -webkit-animation-name:tooltip;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-direction: normal;
  -webkit-animation-play-state: running;
  -webkit-animation-delay:0;
}
.tooltip:hover b:before{
  position:absolute;
  top:0;
  left:0;
  content:attr(name);
  display:block;
  padding:7px 10px;
  -webkit-border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -moz-border-radius: 7px;
  background:#000;
  color:#fff;
  white-space: nowrap;
  font-size:12px;
  opacity:0.95;
  -webkit-box-shadow:0px 0px 10px #000;
}

/*
 *  tooltip 2
 */
.tooltip.type2{
  border-bottom:3px solid blue;
}
.tooltip.type2.img1:hover b:before{
  content:url(http://t0.gstatic.com/images?q=tbn:6oAwwL7n9NSRcM:http://www.lifeshot.jp/files/photos/1147341794/1148816719_f.jpg);
}
.tooltip.type2.img2:hover b:before{
  content:url(http://t2.gstatic.com/images?q=tbn:zR_a7J75WHfQfM:http://sozai.vis.ne.jp/image/kyositu01.jpg)
}

/*
 *  function
 */
@-webkit-keyframes tooltip{
  0%{
    top:50%;
    opacity:0;
  }
  10%{
    opacity:1;
  }
  50%{
    opacity:1;
  }
  90%{
    top:130%;
    opacity:1;
  }
  100%{
    top:50%;
    opacity:0;
  }
}

<h1>webkit only</h1> titleを使わなかった理由はブラウザの"ツールチップ"が出るから… 二重線にマウスを乗せるとルビが出ます。 青線にマウスを乗せると画像が出ます。 小学校に居る時分学校の二階から飛び降り一週間ほど腰（こし）を抜（ぬ）かした事がある。吾輩はようやくの内に云わせると思って見るが出た。 教師と風がない。 それでも主人のない。その後（たび）める事やらいくら body { background-color: #fff; font: 30px sans-serif; font-size:12px;} p{ line-height:1.4;} .tooltip{ position:relative; display:inline-block; border-bottom:3px double #000; } .tooltip:hover{ position:relative; } .tooltip b{ position:absolute; top:0; left:0; z-index:999; } /* * tooltip 1 */ .tooltip:hover b{ opacity:0; background:#000; width:0px; height:0px; top:130%; font-weight:normal; display:inline-block; -webkit-animation-name:tooltip; -webkit-animation-duration: 2s; -webkit-animation-iteration-count:1; -webkit-animation-direction: normal; -webkit-animation-play-state: running; -webkit-animation-delay:0; } .tooltip:hover b:before{ position:absolute; top:0; left:0; content:attr(name); display:block; padding:7px 10px; -webkit-border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -moz-border-radius: 7px; background:#000; color:#fff; white-space: nowrap; font-size:12px; opacity:0.95; -webkit-box-shadow:0px 0px 10px #000; } /* * tooltip 2 */ .tooltip.type2{ border-bottom:3px solid blue; } .tooltip.type2.img1:hover b:before{ content:url(http://t0.gstatic.com/images?q=tbn:6oAwwL7n9NSRcM:http://www.lifeshot.jp/files/photos/1147341794/1148816719_f.jpg); } .tooltip.type2.img2:hover b:before{ content:url(http://t2.gstatic.com/images?q=tbn:zR_a7J75WHfQfM:http://sozai.vis.ne.jp/image/kyositu01.jpg) } /* * function */ @-webkit-keyframes tooltip{ 0%{ top:50%; opacity:0; } 10%{ opacity:1; } 50%{ opacity:1; } 90%{ top:130%; opacity:1; } 100%{ top:50%; opacity:0; } }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/294e/js?view=design"></script><a href="http://jsdo.it/GeckoTang/294e" title="js無しでtooltip+effect">js無しでtooltip+effect - jsdo.it - share JavaScript, HTML5 and CSS</a>
zip