Bootstrap4 基本チュートリアル

Bootstrap4 ポップアップボックス Bootstrap4 モーダルボックス

Bootstrap4 ヒントボックス

ヒントボックスは小さなポップアップウィンドウで、要素にマウスを移動すると表示され、要素からマウスを移動すると消失します。

ヒントボックスの作成方法

要素にdata属性を追加することで-toggle="tooltip" ヒントボックスを作成しましょう。

title属性の内容はヒントボックスに表示される内容です：

<a　href="#"　data-toggle="tooltip"　title="私はヒントの内容!">マウスをこの場所に移動</a>

注意: ヒントボックスはjQueryの初期化コードに書かれます: 然後指定された要素でtooltip()メソッドを呼び出します。

以下の例は、ドキュメントのどこでもヒントボックスを使用できます：

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>ヒントボックスの例</h2><br>
　　<a　href="#"　data-toggle="tooltip"　title="私はヒントの内容!">マウスをこの場所に移動</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通り:

ヒントボックスの場所を指定

デフォルトでは、ヒントボックスは要素の上に表示されます。

data属性を使用-placement属性を使用してヒントボックスの表示方向を設定します: top, bottom, left, right:

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>ヒントボックスの例</h2><br>
　　<a　href="#"　data-toggle="tooltip"　data-placement="top"　title="私はヒントの内容!">マウスをこの場所に移動</a>
　　<a　href="#"　data-toggle="tooltip"　data-placement="bottom"　title="私はヒントの内容!">マウスをこの場所に移動</a>
　　<a　href="#"　data-toggle="tooltip"　data-placement="left"　title="私はヒントの内容！">マウスをここに移動</a>
　　<a　href="#"　data-toggle="tooltip"　data-placement="right"　title="私はヒントの内容！">マウスをここに移動</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通り:

在按钮中使用:

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
	<button　type="button"　class="btn　btn-secondary"　data-toggle="tooltip"　data-placement="top"　title="Tooltip　on　top">
	　　Tooltip　on　top
	</button>
	<button　type="button"　class="btn　btn-secondary"　data-toggle="tooltip"　data-placement="right"　title="Tooltip　on　right">
	　　Tooltip　on　right
	</button>
	<button　type="button"　class="btn　btn-secondary"　data-toggle="tooltip"　data-placement="bottom"　title="Tooltip　on　bottom">
	　　Tooltip　on　bottom
	</button>
	<button　type="button"　class="btn　btn-secondary"　data-toggle="tooltip"　data-placement="left"　title="Tooltip　on　left">
	　　Tooltip　on　left
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通り:

提示内容添加 HTML 标签，设置 data-html="true"，内容放在 title 标签里头:

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<button　type="button"　class="btn　btn-secondary"　data-toggle="tooltip"　data-html="true"　title="<em>Tooltip</em>　<u>with</u>　<b>HTML</b>
　　Tooltip　with　HTML
</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通り:

禁用按钮：

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
	<span　class="d-inline-block"　tabindex="0"　data-toggle="tooltip"　title="Disabled　tooltip">
	　　<button　class="btn　btn-primary"　style="pointer-events:　none;"　type="button"　disabled>Disabled　button</button>
	</span>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通り:

Bootstrap4 ポップアップボックス Bootstrap4 モーダルボックス