お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

説明を出してやろう。

スマホサイトで使えるようにツールチッププラグインを改造してみました。

ツールチッププラグイン

そもそもツールチップとは何か、といったお話です。
PC版ではマウスオーバーとかしたときに、詳細の説明が出てくるアレです。
今回は案件の都合上スマホサイトで使うとの事でしたのでスマホ版に改造しています。

入手経路

まずは、プラグインの入手から
プラグイン配布元
このページ下のほう、CSSとJSがベロンと書いてあるのでコピーし、それぞれ好きなファイル名にして保存してあげます。

使用方法

とりあえず要素に、[title]と[rel]属性をつける必要があります。
各属性の意味と内容については↓

title属性

ツールチップに表示させる文言となります。
文字列だけかと思っていましたが、普通にhtmlタグも入れる事ができました。
すげぇ！！！！！ 

<a title="User Experience<img src='./img/test.jpg' width='100' height='100'>
<a href='http://google.com' target='_blank'>先生！</a>
<div style='background-color: #FFF;width: 150px;height:150px;color:#000'
<divやで</div>" rel="tooltip">UX</a>

こんな感じです。
ちょっと改行入って分かりにくいかもしれないですが、titleの中に全て収まっています。
いう間でもなく、この例では title="" とダブルクオーテーションで囲ってますので、その中で使用するタグでは
シングルクオートで囲う必要がありますね。逆も然り。

rel属性

tooltip と指定してあげてください。固定値です。
この属性のこの値にしないとツールチップは当然出てきません。

ここからは改造内容について

このプラグインですが、このまま使うとなると致命的な問題がありました。
それは、【ツールチップの表示位置】なのです。
例えば、windowの先頭にツールチップが出る要素があるとして、それを出すと
要素の下に出る。
逆に要素がwindowの下にある場合は、ツールチップが要素の上に出るのが理想なのですが
なんだかそうじゃない雰囲気っぽいでしたので、そこを修正する必要がありました。

改造内容その１

なかなか分かりにくいというか再現できなかったのですが
デフォルトのままですと、ビリビリします。
感電するわけではないのですが、マウスオーバーで表示した瞬間に、出てくる要素がマウスカーソルにかぶってしまって
閉じる処理が動いてしまうのです。で、閉じたらまた乗るから出る。を永遠と繰り返してビリビリするのです。

改造内容その２

要素の位置によってチップの表示位置が切り替わらない。
とりあえず見る:デフォルトのまま 上記ページを開いてUXっていう文字があると思います。
それにマウスオーバーをしてみてください。でますよね。チップさん
で、UXがブラウザの下にいる時は全然よいのですが
逆にUXがブラウザの上にいる状態でマウスオーバーすると、一目瞭然です。

改造内容その１の詳細内容

ビリビリするときの対処方法

  1. で、今回の【びりびり】するのって出現位置が被るからなので以下を変更します。 
    pos_top  = target.offset().top - tooltip.outerHeight() - 20;
    を 
    pos_top  = target.offset().top - tooltip.outerHeight() - 50;
    出現位置をズラしています。
    兎に角マウスポインタに当たらなければよいのでこの辺は各自調整といった所でしょうか
  2. これ以下は、一応念のためです。もしかしたらいらないかもやしれません…
    まず、先頭で行われいる、変数定義部分にフラグ用変数を追加します。
    tipMoveって名前にしました。
  3. init_tooltipメソッドの最初に 
    if(tipMove == 1) return false;
tipMove = 1;
    を追加しました。
    これを追加することで、一回通って、フラグが立ち、そのフラグが折れない限りは２回目以降の処理を
    しない事になりますね。 
  4. tooltip.css( { left: pos_left, top: pos_top } )
                   .animate( { top: '+=10', opacity: 1 }, 50 );
    となっている部分があります。
    これがツールチップの表示処理となります。
    上記でつくったフラグはツールチップが表示されると必要ないものになりますので フラグをへしおってやります。 
    tooltip.css( { left: pos_left, top: pos_top } ).animate( { top: '+=10', opacity: 1 }, 50,function()
{
  tipMove = 0;
} );
  5. 念のため、閉じる処理部分にも同じようにフラグのへし折りを追加します。
    var remove_tooltip = function()
{
  tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
  {
      $( this ).remove();
  });

  target.attr( 'title', tip );
};
    を 
    var remove_tooltip = function()
{
  if(tipMove == 1) return false;
  tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
  {
      $( this ).remove();
  });

  target.attr( 'title', tip );
};
    とします。

改造内容その２の詳細内容

要素の位置によってチップの表示位置を変更する。

  1. 上下を判断して出し分けしてもらいます。 
    pos_top  = target.offset().top - tooltip.outerHeight() - 50
    としている部分に続けて 
     st = $(window).scrollTop(), // スクロールトップの位置
 judgment = 0, // 判定用変数を定義
 winH  = window.innerHeight ? window.innerHeight: $(window).height(); // ブラウザの大きさを取得

winH = winH / 2;
judgment = parseInt(st) + parseInt(winH); // スクロールトップの位置とブラウザ高さ/2を足す。
    各変数の意味はコメントを参照してください。
    で、その後の２つで何やってるかといいますと、
    前提として、【表示しているブラウザの高さを使って要素がどの位置にいるかを判別して出しわける】
    なのです。
    で、ブラウザを半分に切って、【上半分の時はツールチップを下にだす】【下半分の時はツールチップを上に出す】
    をしようとしているのです。
    で、スクロールトップの位置で、【サイトの上から何PXの位置を表示しているのか】が分かります。
    さらに、現在のwindowサイズの半分を足す事で、【現在見ている画面の中間はサイトの上から何PXなのか？】がでますよね。
    後はそれを使って判定するだけなのですわ！ジャジメントですの！
  2. 判定処理です。
    以下の処理を書き換えます。 
    if( pos_top < 0 )
{
    var pos_top  = target.offset().top + target.outerHeight();
    tooltip.addClass( 'top' );
}
else
    tooltip.removeClass( 'top' );
    を 
    if( judgment >= target.offset().top )
{
  var pos_top  = target.offset().top + target.outerHeight();
  tooltip.addClass( 'top' );
}
else
{
  tooltip.removeClass( 'top' );
}
    とします。
    【現在見ている画面の中間はサイトの上から何PXなのか】の数値と
    【クリックされた要素はサイトの上から何PXなのか】の数値を比較し
    大きければ中間より下、つまり、ツールチップを上に出す。
    小さければ中間より上、つまり、ツールチップを下に出す。
    といった処理分けになります。Yes

ここまでで【基本的な改造となります。】
PC版のであればこのまま使用してもらっても結構であります。
今回はスマホでも使えるようになので、もう１段階くらい改造を進めてみます。

さらに改造内容する

  • スマホ版に変更する
  • ツールチップを出した後、他要素をタップする事でツールチップを消したい

の２点をやっていきます。

スマホ版に変更する

  1. トリガーをクリックに変更します。 
      targets.bind( 'mouseenter', function()
    を 
    targets.bind( 'click', function()
    に変更。
    続けて 
    target.bind( 'mouseleave', remove_tooltip );
    を 
    target.bind( 'click', remove_tooltip );
    に変更。
    これでひとまずはスマホでも動作するようになりました。かんたん！

ツールチップの閉じ方

  1. 他要素を適当にクリックして閉じれるようにする
    といったオーダーを解決するためにはプラグインを使いました。
    要するに、クリックしてでる要素以外をクリックした時に閉じればよいのですね。
    プラグイン配布元さん
    ありがたいことですね。ほんとたすかりました。

    上記からお借りしたプラグインを読み込みます。
    そして以下書き換えです。 
    target.bind( 'mouseleave', remove_tooltip );
tooltip.bind( 'click', remove_tooltip );
    を 
    target.skOuterClick(function() {
 remove_tooltip();
});
    に変更！
    スマホ版の時に変更した箇所を殺してしまう暴挙ですが、いらないので仕方がないのです。南無三
    【セレクタ】.skOuterClick(【callback】);
    の書式となり、指定したセレクタ以外をクリックしたとき、の意味になります。
    セレクタを複数したい時の対処方法は上記サイトにありますのでそっち見ておいてください。(適当)
  2. まぁ、これで万事解決キャッホー！と言いたいのですが、iPhoneのsafariで対応しないといけない事がありますので
    それも対応しなければいけません。
    まぁ、clickイベントがきかないんですよね(涙目)
    解決方法として、【clickイベントの要素に対して、CSSで 'cursor','pointer' をしてやると動く】
    との事。へー。へんなのー
    今回の場合は指定要素以外ですので、思い切ってbodyに対してかけてやる事にします。
    ただ、常時はちょっとおかしいので、【ツールチップが出ている時は有効】とします。
    $('body').css('cursor','pointer');
    上記１行をinit_tooltipの先頭に付与させます。

    ※前述したフラグ処理を入れている場合は、フラグ処理の直後(フラグたてた後)で記述してください。
    続いて、CSS無効化処理を追加します。
    remove_tooltipメソッドの先頭に 
    $('body').css('cursor','auto');
    を追加します。
    ※前述したフラグ処理を入れている場合は、フラグ処理の直後(判定処理の後ろ)に記述してください。

改造おーしまい。

諸々の改造が終わりました。
改造結果はデモページこちらでございます。
以上おわり