• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN

[はじめてのjQuery]トップバー左側のSNSボタンにツールチップを付けてみた

Skitched 20121030 005552
今月頭にブログのリニューアルを行ったわけなんですが、トップ画面左上にある各種SNSボタンにhoverした際に説明書きをツールチップにて出してみる挙動を実装してみました:)
(PCで見てね)

Skitched 20121030 004008
↑こんな感じで各種マークにカーソルを合わせるとそのマークの説明がでてきます。

 

コード

まぁすんごい簡単な実装ですが、マークアップなどを記しておきませう。

 

Skitched 20121030 011632

html

<div id="topSocial">
	<ul>
		<li><a href="https://twitter.com/OZPA" target="_blank"><img src="twitter.png" /></a><span>管理人のTwitter</span></li>
		<li><a href="http://www.facebook.com/ozpahyou4" target="_blank"><img src="facebook.png" /></a><span>Facebookページ</span></li>
		<li><a href="https://plus.google.com/u/0/118123021101689403081" target="_blank"><img src="googlePlus.png" /></a><span>Google+</span></li>
		<li><a href="http://feeds.feedburner.com/ozpa-h4" target="_blank"><img src="rss.png" /></a><span>RSS</span></li>
		<li><a href="http://ozpa-h4.com/inquiry/" target="_blank"><img src="contact.png" /></a><span>コンタクトフォーム</span></li>
	</ul>
</div>

htmlはこんな感じ。各種ボタンimgをliタグで囲い、imgの直後にspan要素でtooltip上に表示させる文章を入れておきます。

 

css

#topSocial ul li{
	float: left;
	display: inline-block;
	margin-right: 0px;
	position:relative;
	}
#topSocial ul li span{
	color:#FFF;
	width:110px;
	text-align: center;
	opacity:0.9;
	background-color:#252525;
	padding:5px 3px 3px;
	position:absolute;
	top:52px;
	left:0px;	
	display:none;
	z-index:999;
	}
#topSocial ul li span:after{
	position: absolute; 
	top: -10px; 
	left: 10px;
	content: ""; 
	width: 0;
	height: 0;
	border-bottom: 10px solid #252525;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	opacity:0.9;
	}

cssはこんなん。span要素はhoverした時に表示するので最初は「display:none」にして隠しておきましょう。
また、span:after要素で吹き出しっぽく装飾します。

参考:[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル | コリス

 

jQuery

<head>
<script src="jquery-1.8.2.min.js"></script>
<script>
$(function(){
		$("#topSocial ul li a").hover(
			(function(){
				$(this).next('span:not(:animated)').fadeIn(100)
			}),
			function(){
				$(this).next('span').fadeOut(50)
			});
		});
</script>
(中略)
</head>

そして最後にjQuery。headタグ内でjQueryを読み込んで、「#topSocial」内のliタグにhoverしたらspan要素がフェードインしてくるように記述。以上!
fadeIn、fadeOutの時間は適宜お好きなように調節してください。

そんなわけでツールチップの実装メモでした:)

WordPressテーマを再度作成、ブログのリニューアルをいたしました!


[はじめてのjQuery] jQueryを使用してhover時の画像にドロップシャドウがつくようにしてみた

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×