Bootstrap4의 tooltip을 만드는 방법
1. JavaScript를 사용하여 작동
h tps : // 깜박임 t. jp. 오 rg / 보오 tst 등 p4 / 갓찐 g-s rd d / 인 t 로즈 c 치온
위 사이트와 마찬가지로,
아래의 script 를 페이지의 끝 근처에 있는 body 태그의 직전에 두어 유효하게 한다.
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
2. HTML
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-sign-out-alt fa-lg fa-fw aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="ログアウト"></i>
</a>
</li>
3. JavaScript 실행 코드
게다가 1.의 3행 아래에 우선은 직접 써 보았다.
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
4. CSS
.tooltip .tooltip-inner {
color:red;
background-color: #fff;
border: solid 1px #000;
}
.tooltip-auto[x-placement^=bottom] .arrow::before,
.tooltip .arrow::before {
bottom: 0;
border-width: 0 !important;
border-bottom-color: #fff !important;
}
5. 마무리
Reference
이 문제에 관하여(Bootstrap4의 tooltip을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Geek_Female_Dr/items/654bae36876c5d3ae70d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-sign-out-alt fa-lg fa-fw aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="ログアウト"></i>
</a>
</li>
3. JavaScript 실행 코드
게다가 1.의 3행 아래에 우선은 직접 써 보았다.
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
4. CSS
.tooltip .tooltip-inner {
color:red;
background-color: #fff;
border: solid 1px #000;
}
.tooltip-auto[x-placement^=bottom] .arrow::before,
.tooltip .arrow::before {
bottom: 0;
border-width: 0 !important;
border-bottom-color: #fff !important;
}
5. 마무리
Reference
이 문제에 관하여(Bootstrap4의 tooltip을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Geek_Female_Dr/items/654bae36876c5d3ae70d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
.tooltip .tooltip-inner {
color:red;
background-color: #fff;
border: solid 1px #000;
}
.tooltip-auto[x-placement^=bottom] .arrow::before,
.tooltip .arrow::before {
bottom: 0;
border-width: 0 !important;
border-bottom-color: #fff !important;
}
5. 마무리
Reference
이 문제에 관하여(Bootstrap4의 tooltip을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Geek_Female_Dr/items/654bae36876c5d3ae70d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Bootstrap4의 tooltip을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Geek_Female_Dr/items/654bae36876c5d3ae70d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
