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 모달