Bootstrap에서 툴팁을 사용하는 방법은 무엇입니까? 다음 글에서는 Bootstrap5의 팝업 프롬프트와 툴팁 구성 요소의 사용법을 소개하겠습니다. 도움이 되길 바랍니다!
팝오버와 툴팁이라는 두 가지 컨트롤에 대해 이야기해 보겠습니다. 이 두 구성 요소는 단일 기능을 가지며 사용하기가 매우 간단합니다. [관련 권장사항: "bootstrap Tutorial"]
1 예시
1.1 참고사항
팝오버 플러그인 사용 시 주의사항:
1.2 어디에서나 팝오버 활성화
페이지의 모든 팝오버를 초기화하는 한 가지 방법은 data-bs-toggle 속성을 통해 선택하는 것입니다:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>Popovers</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
点此按钮弹出提示
</button>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>1.3 컨테이너 옵션을 사용하세요
특정할 때 상위 요소의 스타일이 팝오버를 방해하는 경우 팝오버의 HTML이 해당 요소 내에 나타나도록 사용자 정의 컨테이너를 지정해야 합니다. 예제 팝오버가 버튼 클래스에 추가된다는 점을 제외하면 이 항목과 위 항목 사이에는 표시에 차이가 없습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>Popovers</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button"
class="btn btn-lg btn-danger example-popover"
data-bs-toggle="popover"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
点此按钮弹出提示
</button>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
</script>
</body>
</html>ID를 사용하시면 더 이해하기 쉬울 것 같습니다
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>Popovers</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button"
id="example-popover"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
点此按钮弹出提示
</button>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var popover = new bootstrap.Popover(document.querySelector('#example-popover'), {
container: 'body'
})
</script>
</body>
</html>2 팝업 방향 변경
팝업 프롬프트 정보를 위쪽, 오른쪽, 아래쪽, 왼쪽 4가지 방향으로 만들 수 있습니다. 사용법도 매우 간단합니다. 버튼 속성에 data-bs-placement="position"을 추가하기만 하면 됩니다. 여기서 위치는 위쪽, 아래쪽, 왼쪽 또는 오른쪽이 될 수 있습니다.
표시할 위치는 충분한 공간이 있어야 하며, 그렇지 않으면 자동으로 적절한 위치를 찾아 상단에 표시되도록 설정했지만 상단이 이미 브라우저 상단에 있는 경우, 하단에 표시됩니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>Popovers</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
默认
</button>
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-placement="top"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
上部
</button>
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-placement="bottom"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
下部
</button>
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-placement="left"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
左侧
</button>
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-placement="right"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
右侧
</button>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
3 어디에서나 다시 닫으세요
기본적으로 버튼을 클릭하면 프롬프트 메시지가 표시되고, 다시 버튼을 클릭하면 메시지가 숨겨집니다. 그렇지 않으면 메시지가 항상 표시됩니다.
이전에 표시된 프롬프트 정보를 닫기 위해 아무 곳이나 다시 클릭하려면 버튼에 data-bs-trigger="focus"属性，并在js文件中增加trigger: 'focus'를 추가해야 합니다.
올바른 브라우저 간 및 플랫폼 간 동작을 달성하려면 버튼 태그 대신 a 태그를 사용해야 하며 tabindex 속성도 포함해야 합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>Popovers</title>
</head>
<body>
<div>
<br><br><br><br>
<a tabindex="0"
class="btn btn-lg btn-danger"
role="button" data-bs-toggle="popover"
data-bs-trigger="focus"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！" >
点此按钮弹出提示，点击空白处提示消失
</a>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
trigger: 'focus'
})
</script>
</body>
</html>Tooltips는 Popover와 매우 유사하며 선택적으로 로드되며 직접 초기화해야 합니다. 그 디스플레이도 예약된 공간에 따라 자동으로 조정됩니다. 팝업 팁과 달리 도구 설명은 버튼 위에 마우스를 올리면 표시되고, 마우스를 떼면 클릭할 필요 없이 자동으로 숨겨집니다.
1 도구 설명 적용 코드
는 기본적으로 팝업 프롬프트와 유사합니다. 도구 설명이 적용되려면 이 코드가 페이지에 포함되어야 합니다.
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})2 툴팁 예시
툴팁은 일반적으로 버튼과 링크에 기능을 설명하는 데 사용되며, 이미지에도 사용할 수 있습니다. title의 값은 마우스를 올렸을 때 표시되는 내용이며, html 요소를 사용할 수 있습니다.
링크에는 기본 제목 속성이 있으며 해당 프롬프트 텍스트가 브라우저 상태 표시줄에 표시됩니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>工具提示</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="这个是按钮提示">
按钮提示
</button>
<a href="#" data-bs-toggle="tooltip" title="这个是链接提示">链接提示</a>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>3 툴팁 표시 위치
는 팝업 프롬프트와 같이 위쪽, 아래쪽, 왼쪽, 오른쪽의 4가지 툴팁 방향을 지원합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="顶部提示">
顶部提示
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="右侧提示">
右侧提示
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="底部提示">
底部提示
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="左侧提示">
左侧提示
</button>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>4는 기사의 프롬프트에 사용됩니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<div class="bd-example tooltip-demo">
<p>
最近<a href="#" data-bs-toggle="tooltip" title="哔哩哔哩">B站</a> 是迎来了自己12周年的纪念日，
之前吧，B站做过好些<a href="#" data-bs-toggle="tooltip" title="点此查看流行语盘点内容">流行语盘点</a>，
比如“awsl”一类的词，不少朋友都刷过，甚至有的<a href="#" data-bs-toggle="tooltip" title="相当于现代典故">梗</a>还出圈了，
像是后那个什么浪一类的，我留意到B站官方很多时候还会做一些相关的科普盘点啥的，时不时有推送。
</p>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>두 프롬프트의 텍스트 부분은 HTML 및 부트스트랩의 공통 클래스를 사용할 수 있습니다. , 간격, 타이포그래피, 글꼴, 색상 등을 설정하고 직접 시도하여 더 멋진 효과를 만들 수 있습니다.
부트스트랩에 대한 자세한 내용을 보려면 부트스트랩 기본 튜토리얼을 방문하세요! !
위 내용은 Bootstrap에서 툴팁을 사용하는 방법은 무엇입니까? 프롬프트 구성 요소의 사용에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
