表示位置・上下左右

表示位置はデフォルトでは上側表示になっていますが、スクリプトの
「position:'top,」の値を変更することで位置を 左側表示にしたり、
右側表示にしたり、 下側表示にすることができます。

ページをロードしたときに表示

表示する要素にオンマウスすることなく、ページをロードしたときに最初だけ自動表示。

Some content

Code Example

jQuery(window).load(function(){
  jQuery('.page-load').tipso('show');
});

CSS3のアニメーション効果

CSS3のアニメーション効果 を付加したツールチップです。下側のセレクトから、アニメーションのin、outの効果を変更できます。

Animate.css

Code Example

If you use animate.css
jQuery(.tipso).tipso({
  animationIn: 'bounceIn',
  animationOut: 'bounceOut'
});

If you don't use animate.css
jQuery(.tipso).tipso({
  animationIn: '',
  animationOut: ''
});

表示・非表示の切り替えアンカー付き

ツールチップの表示の切り替えをオンマウス、マウスアウトだけでなく、水色アンカーからも可能に。

Some content

Code Example

jQuery('.show-hide-tipso').on('click', function(e){
  if(jQuery(this).hasClass('clicked')){
	jQuery(this).removeClass('clicked');
	jQuery('.show-hide').tipso('hide');
  } else {
	jQuery(this).addClass('clicked');
	jQuery('.show-hide').tipso('show');
  }

  e.preventDefault();
});

ツールチップを無効にするアンカー付き

水色のアンカークリックで、ツールチップ表示を無効に。

Some content

Code Example

jQuery('.destroy-tipso').on('click', function(e){
  jQuery('.destroy').tipso('destroy');
  e.preventDefault();
});

ツールチップの内容をアップデート

水色アンカークリックで、ツールチップの内容を変更。

Some content

Code Example

jQuery('.update-tipso').on('click', function(e){
  jQuery('.update').tipso('update', 'content', 'アップデート後');
  e.preventDefault();
});

ツールチップの内容をアップデート2

水色アンカークリックで、ツールチップの内容を入力したものに変更。

Some content

Code Example

jQuery('.update-tipso-input').on('click', function(e){
  var content = jQuery('.tipso-content').val();
  jQuery('.update-tipso-content').tipso('update', 'content', content);
  e.preventDefault();
});

title属性の内容をツールチップ表示

ツールチップ表示の内容をスクリプトなどで用意するのではなく、オンマウスする要素のtitle属性の内容に。

Some content

Code Example

jQuery('.title-tipso').tipso();

画像にオンマウスでツールチップ

Code Example

jQuery('.img-tipso').tipso({
  useTitle : false
});

ツールチップ表示後のコールバック

ツールチップを表示するスクリプトに コールバック を付けて、機能を追加します。このサンプルでは、ツールチップを表示したときと閉じたときにアラートを追加しています。

Code Example

jQuery('.callback-tipso').tipso({
  onShow : function(){
    alert('開きました！');
  },
  onHide: function(){
    alert('閉じました！');
  }
});