自動というのがいいですよね！ レスポンシブWebデザインは一つのHTMLコードで複数のウィンドウサイズに対応できる便利な技術ですが、幅が変更されることで予定外の表示になることがあります。単純にデザインが統一化されるだけでなく、それぞれに合わせたテクニックが必要です。 今回はツールチップに注目したライブラリ、Offscreen.jsを紹介します。ウィンドウ幅を読み込んで表示位置を調整してくれます。

Offscreen.jsの使い方

HTMLは次のように記述します。

$( document ).ready(function() {
  $('.tooltip__content').offscreen({
    smartResize: true,
    rightClass: 'right-edge',
    leftClass: 'left-edge'
  });
});

smartResize を trueにするとウィンドウリサイズも有効になり、都度サイズをチェックした上で実行されるようになるようです。

Offscreen.jsのデモ

例えばこれは一番左のツールチップを出した場合。中央寄せで出ています。

一番右。中央寄せではウィンドウから飛び出してしまうので左側に出ます。

このツールチップ表示位置の自動調整がOffscreen.jsの特徴になります。

ウィンドウサイズを縮めた場合。左側のツールチップも自動的に調整されます。

左から2番目の場合。こちらもそれなりの場所に調整されます。

Offscreen.jsを使えばこれまでのツールチップをそのまま活かしたまま、レスポンシブWebデザインにスマートな対応ができるようになります。意外と気付きづらいデザイン上の問題点をスマートに解決してくれそうです。

Offscreen.jsはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

Offscreen.js Demo gijsroge/offscreen.js