【Bootstrap】Bootstrap 4 ~ Tooltip / Popovers 編 ~

■ はじめに

フロントエンドライブラリ Bootstrap 4 で
Tooltip / Popoversを実装してみた。

【1】サンプル

<!doctype html>
<html lang="jp">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>
<a href="#" data-toggle="tooltip" title="これがツールチップです">リンク</a>
</p>

<p>
<a href="#" data-toggle="popover" title="タイトル" data-content="ポップオーバーの説明.もう一度ボタンを押すと閉じる">
ココを押して下さい</a>
</p>

<p>
<a href="#" data-toggle="popover" data-trigger="hover" data-placement="right"
 title="タイトル" data-content="ポップオーバーの説明">ココ</a>
</p>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(function() {
  // !! ポイント !! 初期化する必要がある
  $("[data-toggle=tooltip]").tooltip();
  $("[data-toggle=popover]").popover();
});
</script>
</body>
</html>

【2】Tooltip / Popovers あれこれ

モバイル/タブレットでは、Tooltip / Popoversを無効にしたい
 PCでは、Tooltip / Popoversは説明がついていいと思ったが
モバイル/タブレットだと操作が不便になるので、無効にすることを考える

対策案

 モバイル/タブレットの場合(※)、
初期化である「$("[data-toggle=tooltip]").tooltip();」「$("[data-toggle=popover]").popover();」
を実行させない。

※補足:モバイル/タブレットの判定方法

 なお、モバイル/タブレットの判定は、色々と方法はあるみたいだが
簡易的に、ユーザーエージェント(navigator.userAgent)で判定する ... ※

 ちなみに、初め、モバイル/タブレットの判定を、
画面幅だけで判定しようと思ったが、
iPadのテストで横向きにした際に幅広くなってしまうので
ユーザーエージェントを採用した。

https://webnetamemo.com/coding/jquery/201606253129
https://www.netimpact.co.jp/hp-story/20627/

サンプル

<!doctype html>
<html lang="jp">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>
<a href="#" data-toggle="tooltip" title="これがツールチップです">リンク</a>
</p>

<p>
<a href="#" data-toggle="popover" data-trigger="hover" data-placement="right"
 title="タイトル" data-content="ポップオーバーの説明">ココ</a>
</p>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
function isMobileOrTablet() {
  var userAgent = navigator.userAgent;
  console.log("[Debug] userAgent = " + userAgent);
  return userAgent.indexOf('Mobile') > 0 || userAgent.indexOf('Android') > 0 ||
    userAgent.indexOf('iPhone') > 0 || userAgent.indexOf('iPod') > 0 || userAgent.indexOf('iPad') > 0;
}

$(function() {
  if (isMobileOrTablet()) {
    console.log("[Info] tooltip/popover OFF");
  } else {
    console.log("[Info] tooltip/popover ON");
    $("[data-toggle=tooltip]").tooltip();
    $("[data-toggle=popover]").popover();
  }
});
</script>
</body>
</html>

参考文献

Tooltip
http://cccabinet.jpn.org/bootstrap4/components/tooltips
Popovers
http://cccabinet.jpn.org/bootstrap4/components/popovers