■ サンプル
<!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>
■ 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>