img01

テキストテキストてきすとtexttextテキストテキストてきすとtexttexttekisutotekisutoテキストテキストてきすとテキストテキストてきすとtexttextテキストテキストてきすとtexttexttekisutotekisutoテキストテキストてきすとtexttext>テキストテキストてきすとtexttexttekisutotekisuto テキストテキストてきすとtexttextテキストテキストてきすとtexttexttekisutotekisutoテキストテキストてきすとtexttext>テキストテキストてきすtexttexttekisutotekisuto

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/tinyTips.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.tinyTips.js"></script>
<script>
	$(window).load(function(){
		$('.tTip1').tinyTips('light', 'title');
		$('.tTip2').tinyTips('yellow', '<img src="<PATH>/img11.jpg" width="90%" /><br />画像もOK!できる子です。');
		$('.tTip3').tinyTips('green', 'title');
		$('.tTip4').tinyTips('blue', 'title');
	});
</script>

//色の種類
light,
yellow,
orange,
red,
green,
blue,
purple,
dark
<p class="p01"><img class="tTip1" src="<PATH>/img05.jpg" alt="img01" title="画像です"></p>
<p class="p02">テキストテキストてきすとtexttextテキストテキスト<a href="#" class="tTip2" title="吹き出しがでるのです。">てきすと</a>texttexttekisutotekisutoテキストテキストてきすとテキストテキストてきすとtexttextテキストテキストてきすとtexttexttekisutotekisutoテキストテキストてきすとtexttext>テキストテキストてきすと<a href="#" class="tTip3" title="吹き出しの色も色々あるよ">texttext</a>tekisutotekisuto
	テキストテキストてきすとtexttextテキストテキストてきすとtexttexttekisutotekisutoテキスト<a href="#" class="tTip5" title="色は8種類">テキス</a>トてきすとtexttext>テキストテキストてきす<a href="#" class="tTip4" title="title属性の値を表示しています">と</a>texttexttekisutotekisuto</p>

tinyTipsについて

tinyTipsは、簡単にカラフルな吹き出しを表示できるプラグインです。
吹き出しの色、表示するHTMLなどもオプションで指定できるので、色々使えそうな感じです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン

  • Tooltipster

    Tooltipster

    非常に豊富な機能をもった吹き出しプラグイン

  • Mouseinfobox

    Mouseinfobox

    簡単に吹き出しを表示することができる

  • vtooltip

    vtooltip

    シンプルな吹き出しを表示できる

  • tipsy

    tipsy

    シンプルな見た目と多様なオプションを備えた吹き出し

  • Tipper

    Tipper

    マウスオーバーで表示する吹き出しを簡単に設置できる