Boostrap4로 tooltip에 이미지 표시
2886 단어 bootstrap4
Tooltip with HTML
Bootstrap4에서 Tooltip에 HTML을 직접 쓸 수 있게 되었으므로 텍스트뿐만 아니라 이미지도 표시할 수 있는지 확인했습니다.
공식 문서
Tooltips · Bootstrap
HTML<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>
JS$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Tooltip에 이미지 표시
CodePen: Bootstrap4 tooltip with image
HTML<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="animal<br><img src="https://placeimg.com/100/100/animals">">
Tooltip with Image
</button>
JS$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Reference
이 문제에 관하여(Boostrap4로 tooltip에 이미지 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/NaokiIshimura/items/6e6a593f4f935459bf07
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<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>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="animal<br><img src="https://placeimg.com/100/100/animals">">
Tooltip with Image
</button>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Reference
이 문제에 관하여(Boostrap4로 tooltip에 이미지 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/NaokiIshimura/items/6e6a593f4f935459bf07텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
