{"id":90572,"date":"2025-09-01T13:50:01","date_gmt":"2025-09-01T06:50:01","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=90572"},"modified":"2025-09-01T13:50:04","modified_gmt":"2025-09-01T06:50:04","slug":"huong-dan-su-dung-tooltip-bootstrap","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/","title":{"rendered":"Tooltip Bootstrap: H\u01b0\u1edbng d\u1eabn c\u00e1ch  hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#Gioi_thieu_ve_Tooltip_trong_Bootstrap\" >Gi\u1edbi thi\u1ec7u v\u1ec1 Tooltip trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#Cach_khoi_tao_va_kich_hoat_Tooltip_trong_Bootstrap\" >C\u00e1ch kh\u1edfi t\u1ea1o v\u00e0 k\u00edch ho\u1ea1t Tooltip trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#Cac_truong_hop_su_dung_Tooltip_Bootstrap\" >C\u00e1c tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng Tooltip Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#Cac_nhom_thuoc_tinh_va_class_chinh_trong_Tooltip_Bootstrap\" >C\u00e1c nh\u00f3m thu\u1ed9c t\u00ednh v\u00e0 class ch\u00ednh trong Tooltip Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#Lam_viec_voi_Tooltip_bang_JavaScript\" >L\u00e0m vi\u1ec7c v\u1edbi Tooltip b\u1eb1ng JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#Mot_so_luu_y_khi_su_dung_Tooltip_Bootstrap\" >M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Tooltip Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#Bai_tap_luyen_tap_su_dung_Tooltip\" >B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng Tooltip<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#Cau_nho_thuong_gap_ve_Tooltip_Boostrap\" >C\u00e2u nh\u1ecf th\u01b0\u1eddng g\u1eb7p v\u1ec1 Tooltip Boostrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, ng\u01b0\u1eddi d\u00f9ng lu\u00f4n mong mu\u1ed1n c\u00f3 th\u00f4ng tin nhanh ch\u00f3ng m\u00e0 kh\u00f4ng c\u1ea7n r\u1eddi kh\u1ecfi m\u00e0n h\u00ecnh ch\u00ednh. \u0110\u00e2y ch\u00ednh l\u00e0 l\u00fac Tooltip ph\u00e1t huy t\u00e1c d\u1ee5ng: hi\u1ec3n th\u1ecb n\u1ed9i dung ng\u1eafn g\u1ecdn ngay khi ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c nh\u1eb9 nh\u01b0 di chu\u1ed9t ho\u1eb7c focus v\u00e0o ph\u1ea7n t\u1eed n\u00e0o \u0111\u00f3. Bootstrap cung c\u1ea5p component Tooltip gi\u00fap vi\u1ec7c hi\u1ec3n th\u1ecb c\u00e1c g\u1ee3i \u00fd n\u00e0y tr\u1edf n\u00ean \u0111\u01a1n gi\u1ea3n, hi\u1ec7u qu\u1ea3 v\u00e0 chuy\u00ean nghi\u1ec7p h\u01a1n.\u00a0<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u ngay:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tooltip trong Bootstrap l\u00e0 g\u00ec?<\/li>\n\n\n\n<li>C\u00e1ch kh\u1edfi t\u1ea1o v\u00e0 t\u00f9y ch\u1ec9nh Tooltip<\/li>\n\n\n\n<li>C\u00e1c thu\u1ed9c t\u00ednh quan tr\u1ecdng: n\u1ed9i dung, v\u1ecb tr\u00ed, hi\u1ec7u \u1ee9ng<\/li>\n\n\n\n<li>B\u00e0i t\u1eadp th\u1ef1c h\u00e0nh Tooltip t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-gi\u1edbi-thi\u1ec7u-v\u1ec1-tooltip-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Gioi_thieu_ve_Tooltip_trong_Bootstrap\"><\/span><strong>Gi\u1edbi thi\u1ec7u v\u1ec1 Tooltip trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tooltip-la-gi\"><strong>Tooltip l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>Tooltip (g\u1ee3i \u00fd n\u1ed5i b\u1eadt) l\u00e0 nh\u1eefng h\u1ed9p tho\u1ea1i nh\u1ecf xu\u1ea5t hi\u1ec7n khi ng\u01b0\u1eddi d\u00f9ng <strong>di chu\u1ed9t (hover)<\/strong> ho\u1eb7c <strong>t\u1eadp trung (focus)<\/strong> v\u00e0o m\u1ed9t ph\u1ea7n t\u1eed, nh\u1eb1m hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung ng\u1eafn g\u1ecdn, v\u00ed d\u1ee5 nh\u01b0 h\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng, nh\u00e3n bi\u1ec3u t\u01b0\u1ee3ng ho\u1eb7c tr\u1ea1ng th\u00e1i n\u00fat.<\/p>\n\n\n\n<p>Tooltip th\u01b0\u1eddng \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng tr\u00ean c\u00e1c th\u00e0nh ph\u1ea7n nh\u01b0 n\u00fat b\u1ea5m, icon, li\u00ean k\u1ebft ho\u1eb7c tr\u01b0\u1eddng form \u0111\u1ec3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gi\u1ea3i th\u00edch \u00fd ngh\u0129a bi\u1ec3u t\u01b0\u1ee3ng ho\u1eb7c n\u00fat<\/li>\n\n\n\n<li>G\u1ee3i \u00fd h\u00e0nh \u0111\u1ed9ng khi ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c<\/li>\n\n\n\n<li>Cung c\u1ea5p th\u00eam th\u00f4ng tin ng\u1eafn g\u1ecdn m\u00e0 kh\u00f4ng chi\u1ebfm kh\u00f4ng gian giao di\u1ec7n<\/li>\n<\/ul>\n\n\n\n<p>Trong Bootstrap, Tooltip l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a h\u1ec7 th\u1ed1ng component h\u1ed7 tr\u1ee3 b\u1edfi Popper.js, gi\u00fap x\u1eed l\u00fd v\u1ecb tr\u00ed v\u00e0 hi\u1ec7u \u1ee9ng t\u1ef1 \u0111\u1ed9ng.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"425\" height=\"114\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image.png\" alt=\"\" class=\"wp-image-90573\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image.png 425w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-300x80.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-200x54.png 200w\" sizes=\"auto, (max-width: 425px) 100vw, 425px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>V\u00ed d\u1ee5 v\u1ec1 tooltip trong Bootstrap<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ea1i-sao-nen-dung-tooltip-c\u1ee7a-bootstrap\"><strong>T\u1ea1i sao n\u00ean d\u00f9ng Tooltip c\u1ee7a Bootstrap?<\/strong><\/h3>\n\n\n\n<p>Bootstrap cung c\u1ea5p component Tooltip m\u1ea1nh m\u1ebd v\u00e0 d\u1ec5 tri\u1ec3n khai, gi\u00fap b\u1ea1n nhanh ch\u00f3ng t\u00edch h\u1ee3p tooltip v\u00e0o giao di\u1ec7n web m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam nhi\u1ec1u CSS ho\u1eb7c JavaScript th\u1ee7 c\u00f4ng. Tooltip c\u1ee7a Bootstrap s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n Popper.js \u0111\u1ec3 x\u1eed l\u00fd \u0111\u1ecbnh v\u1ecb, cho ph\u00e9p hi\u1ec3n th\u1ecb tooltip \u1edf nhi\u1ec1u v\u1ecb tr\u00ed kh\u00e1c nhau nh\u01b0 tr\u00ean, d\u01b0\u1edbi, tr\u00e1i, ph\u1ea3i.<\/p>\n\n\n\n<p>So v\u1edbi vi\u1ec7c t\u1ef1 vi\u1ebft tooltip b\u1eb1ng HTML\/CSS, Bootstrap mang l\u1ea1i nhi\u1ec1u \u01b0u \u0111i\u1ec3m r\u00f5 r\u1ec7t:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Ti\u00eau ch\u00ed<\/strong><\/td><td><strong>T\u1ef1 vi\u1ebft CSS\/JS<\/strong><\/td><td><strong>Tooltip Bootstrap<\/strong><\/td><\/tr><tr><td><strong>Th\u1eddi gian ph\u00e1t tri\u1ec3n<\/strong><\/td><td>T\u1ed1n nhi\u1ec1u th\u1eddi gian, ph\u1ea3i x\u1eed l\u00fd v\u1ecb tr\u00ed v\u00e0 hi\u1ec7u \u1ee9ng<\/td><td>D\u00f9ng class v\u00e0 thu\u1ed9c t\u00ednh, kh\u1edfi t\u1ea1o nhanh<\/td><\/tr><tr><td><strong>Responsive &amp; \u0111\u1ecbnh v\u1ecb th\u00f4ng minh<\/strong><\/td><td>Ph\u1ea3i t\u00ednh to\u00e1n to\u1ea1 \u0111\u1ed9 th\u1ee7 c\u00f4ng<\/td><td>D\u00f9ng Popper.js \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng \u0111\u1ecbnh v\u1ecb l\u1ea1i<\/td><\/tr><tr><td><strong>H\u1ed7 tr\u1ee3 HTML &amp; hi\u1ec7u \u1ee9ng<\/strong><\/td><td>C\u1ea7n x\u1eed l\u00fd th\u1ee7 c\u00f4ng<\/td><td>H\u1ed7 tr\u1ee3 n\u1ed9i dung HTML, hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed9ng m\u01b0\u1ee3t<\/td><\/tr><tr><td><strong>Tu\u1ef3 ch\u1ec9nh giao di\u1ec7n &amp; m\u00e0u s\u1eafc<\/strong><\/td><td>Vi\u1ebft th\u00eam CSS ri\u00eang<\/td><td>D\u00f9ng bi\u1ebfn CSS ho\u1eb7c data-bs-custom-class<\/td><\/tr><tr><td><strong>T\u00edch h\u1ee3p v\u1edbi JavaScript<\/strong><\/td><td>Ph\u1ea3i vi\u1ebft th\u00eam JS<\/td><td>C\u00f3 API s\u1eb5n: .show(), .hide(), .setContent() \u0111\u1ec3 qu\u1ea3n l\u00fd c\u00e1c h\u00e0nh \u0111\u1ed9ng<\/td><\/tr><tr><td><strong>T\u01b0\u01a1ng th\u00edch tr\u00ecnh duy\u1ec7t<\/strong><\/td><td>D\u1ec5 b\u1ecb l\u1ed7i n\u1ebfu kh\u00f4ng ki\u1ec3m tra k\u1ef9<\/td><td>Bootstrap \u0111\u00e3 t\u1ed1i \u01b0u &amp; ki\u1ec3m th\u1eed tr\u00ean nhi\u1ec1u tr\u00ecnh duy\u1ec7t<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cach-kh\u1edfi-t\u1ea1o-va-kich-ho\u1ea1t-tooltip-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Cach_khoi_tao_va_kich_hoat_Tooltip_trong_Bootstrap\"><\/span><strong>C\u00e1ch kh\u1edfi t\u1ea1o v\u00e0 k\u00edch ho\u1ea1t Tooltip trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-b\u1ed5-sung-th\u01b0-vi\u1ec7n-popper-vao-d\u1ef1-an-dung-bootstrap\"><strong>B\u1ed5 sung th\u01b0 vi\u1ec7n Popper v\u00e0o d\u1ef1 \u00e1n d\u00f9ng Bootstrap<\/strong><\/h3>\n\n\n\n<p>Tooltip trong Bootstrap s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n b\u00ean ngo\u00e0i Popper.js \u0111\u1ec3 \u0111\u1ecbnh v\u1ecb v\u1ecb tr\u00ed hi\u1ec3n th\u1ecb. N\u1ebfu kh\u00f4ng c\u00f3 Popper, tooltip s\u1ebd kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng ho\u1eb7c hi\u1ec3n th\u1ecb sai v\u1ecb tr\u00ed. T\u00f9y theo c\u00e1ch t\u00edch h\u1ee3p Bootstrap v\u00e0o d\u1ef1 \u00e1n, b\u1ea1n c\u1ea7n \u0111\u1ea3m b\u1ea3o Popper \u0111\u00e3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o theo 2 c\u00e1ch sau:&nbsp;<\/p>\n\n\n\n<p><strong>1. Khi d\u00f9ng CDN (c\u00e1ch ph\u1ed5 bi\u1ebfn v\u00e0 nhanh nh\u1ea5t)<\/strong><\/p>\n\n\n\n<p>N\u1ebfu d\u00f9ng CDN, n\u00ean s\u1eed d\u1ee5ng file <strong>bootstrap.bundle.min.js<\/strong> v\u00ec trong \u0111\u00f3 \u0111\u00e3 bao g\u1ed3m s\u1eb5n Popper:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Ch\u1ec9 c\u1ea7n 1 file JS duy nh\u1ea5t --&gt;\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Tr\u01b0\u1eddng h\u1ee3p b\u1ea1n kh\u00f4ng d\u00f9ng b\u1ea3n bundle, m\u00e0 d\u00f9ng file bootstrap.min.js ri\u00eang, b\u1eaft bu\u1ed9c ph\u1ea3i th\u00eam Popper ph\u00eda tr\u01b0\u1edbc:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Ph\u1ea3i th\u00eam Popper th\u1ee7 c\u00f4ng --&gt;\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Vi\u1ec7c d\u00f9ng sai th\u1ee9 t\u1ef1 ho\u1eb7c thi\u1ebfu Popper l\u00e0 nguy\u00ean nh\u00e2n khi\u1ebfn tooltip kh\u00f4ng hi\u1ec3n th\u1ecb.<\/p>\n\n\n\n<p><strong>2. Khi d\u00f9ng g\u00f3i c\u00e0i \u0111\u1eb7t (npm ho\u1eb7c yarn):<\/strong> N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng d\u1ef1 \u00e1n \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh v\u1edbi Webpack, Vite ho\u1eb7c Parcel v\u00e0 c\u00e0i Bootstrap qua npm\/yarn, c\u1ea7n \u0111\u1ea3m b\u1ea3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00e0i \u0111\u1ee7 c\u1ea3 Bootstrap v\u00e0 Popper:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install bootstrap @popperjs\/core<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Import \u0111\u00fang th\u1ee9 t\u1ef1 trong JavaScript:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import * as bootstrap from 'bootstrap'\nimport '@popperjs\/core'<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-kich-ho\u1ea1t-tooltip-c\u01a1-b\u1ea3n\"><strong>K\u00edch ho\u1ea1t Tooltip c\u01a1 b\u1ea3n<\/strong><\/h3>\n\n\n\n<p>Sau khi \u0111\u00e3 t\u00edch h\u1ee3p \u0111\u00fang th\u01b0 vi\u1ec7n Bootstrap v\u00e0 Popper.js, b\u1ea1n c\u1ea7n ch\u1ee7 \u0111\u1ed9ng k\u00edch ho\u1ea1t tooltip b\u1eb1ng JavaScript. \u0110\u00e2y l\u00e0 c\u01a1 ch\u1ebf opt-in, ngh\u0129a l\u00e0 Bootstrap kh\u00f4ng t\u1ef1 kh\u1edfi t\u1ea1o tooltip \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o hi\u1ec7u n\u0103ng.<\/p>\n\n\n\n<p>C\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 qu\u00e9t to\u00e0n b\u1ed9 c\u00e1c ph\u1ea7n t\u1eed c\u00f3 thu\u1ed9c t\u00ednh <strong>data-bs-toggle=\u201ctooltip\u201d<\/strong> v\u00e0 kh\u1edfi t\u1ea1o b\u1eb1ng \u0111o\u1ea1n m\u00e3 sau:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;script&gt;\n   \/\/ K\u00edch ho\u1ea1t tooltip\n   const tooltipTriggerList = document.querySelectorAll('&#91;data-bs-toggle=\"tooltip\"]')\n   const tooltipList = &#91;...tooltipTriggerList].map(el =&gt; new bootstrap.Tooltip(el))\n &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3, \u0111o\u1ea1n m\u00e3 tr\u00ean s\u1ebd t\u00ecm t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed c\u00f3 g\u1eafn tooltip tr\u00ean trang v\u00e0 t\u1ef1 \u0111\u1ed9ng kh\u1edfi t\u1ea1o. L\u01b0u \u00fd:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>N\u00ean \u0111\u1eb7t \u0111o\u1ea1n script n\u00e0y sau ph\u1ea7n HTML ch\u1ee9a tooltip, ho\u1eb7c \u0111\u1ea3m b\u1ea3o \u0111\u01b0\u1ee3c th\u1ef1c thi sau khi DOM \u0111\u00e3 load.<\/li>\n\n\n\n<li>Tooltip ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng khi ph\u1ea7n t\u1eed c\u00f3 thu\u1ed9c t\u00ednh <strong>data-bs-title<\/strong> (ho\u1eb7c title) v\u00e0 n\u1ed9i dung kh\u00f4ng \u0111\u01b0\u1ee3c \u0111\u1ec3 tr\u1ed1ng.<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 s\u1eed d\u1ee5ng \u0111o\u1ea1n m\u00e3 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;button type=\"button\" class=\"btn btn-secondary\"\n     data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\n     data-bs-title=\"N\u1ed9i dung tooltip hi\u1ec3n th\u1ecb khi di chu\u1ed9t\"&gt;\n     Di chu\u1ed9t v\u00e0o t\u00f4i\n   &lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft h\u1ee3p v\u1edbi code javascript \u1edf b\u00ean tr\u00ean \u0111\u1ec3 k\u00edch ho\u1ea1t tooltip, ta c\u00f3 k\u1ebft qu\u1ea3 sau:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"229\" height=\"116\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-1.png\" alt=\"\" class=\"wp-image-90574\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-1.png 229w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-1-200x101.png 200w\" sizes=\"auto, (max-width: 229px) 100vw, 229px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>L\u00fac ch\u01b0a hover<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"310\" height=\"141\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-2.png\" alt=\"\" class=\"wp-image-90575\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-2.png 310w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-2-300x136.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-2-200x91.png 200w\" sizes=\"auto, (max-width: 310px) 100vw, 310px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"> <em>&nbsp; &nbsp; &nbsp; L\u00fac hover chu\u1ed9t v\u00e0o n\u00fat<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-tr\u01b0\u1eddng-h\u1ee3p-s\u1eed-d\u1ee5ng-tooltip-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_truong_hop_su_dung_Tooltip_Bootstrap\"><\/span><strong>C\u00e1c tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng Tooltip Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Tooltip c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng linh ho\u1ea1t cho nhi\u1ec1u th\u00e0nh ph\u1ea7n trong giao di\u1ec7n web nh\u01b0 n\u00fat b\u1ea5m, li\u00ean k\u1ebft, bi\u1ec3u t\u01b0\u1ee3ng ho\u1eb7c tr\u01b0\u1eddng nh\u1eadp li\u1ec7u. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng ph\u1ed5 bi\u1ebfn k\u00e8m v\u00ed d\u1ee5 minh h\u1ecda.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Tooltip tr\u00ean n\u00fat (button)<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Tr\u01b0\u1eddng h\u1ee3p th\u01b0\u1eddng g\u1eb7p nh\u1ea5t l\u00e0 g\u1eafn tooltip v\u00e0o c\u00e1c n\u00fat b\u1ea5m, gi\u00fap ng\u01b0\u1eddi d\u00f9ng hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 h\u00e0nh \u0111\u1ed9ng khi h\u1ecd t\u01b0\u01a1ng t\u00e1c. Tooltip s\u1ebd xu\u1ea5t hi\u1ec7n \u1edf ph\u00eda tr\u00ean (ho\u1eb7c v\u1ecb tr\u00ed \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh) khi ng\u01b0\u1eddi d\u00f9ng di chu\u1ed9t (hover) ho\u1eb7c focus v\u00e0o n\u00fat.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-title=\"Nh\u1ea5n \u0111\u1ec3 g\u1eedi bi\u1ec3u m\u1eabu\"&gt;\n     G\u1eedi\n   &lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"261\" height=\"133\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-3.png\" alt=\"\" class=\"wp-image-90577\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-3.png 261w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-3-200x102.png 200w\" sizes=\"auto, (max-width: 261px) 100vw, 261px\" \/><\/figure>\n\n\n\n<p>\u0110\u00e2y l\u00e0 c\u00e1ch l\u00e0m ph\u1ed5 bi\u1ebfn khi mu\u1ed1n b\u1ed5 sung m\u00f4 t\u1ea3 ng\u1eafn cho c\u00e1c n\u00fat c\u00f3 n\u1ed9i dung ng\u1eafn g\u1ecdn ho\u1eb7c ch\u1ec9 ch\u1ee9a bi\u1ec3u t\u01b0\u1ee3ng.<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Tooltip tr\u00ean li\u00ean k\u1ebft (link)<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Tooltip c\u0169ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 khi g\u1eafn v\u00e0o c\u00e1c li\u00ean k\u1ebft, \u0111\u1eb7c bi\u1ec7t l\u00e0 nh\u1eefng li\u00ean k\u1ebft kh\u00f4ng c\u00f3 m\u00f4 t\u1ea3 r\u00f5 r\u00e0ng. Vi\u1ec7c g\u1eafn tooltip cho li\u00ean k\u1ebft s\u1ebd gi\u00fap ng\u01b0\u1eddi d\u00f9ng bi\u1ebft tr\u01b0\u1edbc h\u00e0nh \u0111\u1ed9ng s\u1ebd x\u1ea3y ra khi nh\u1ea5n v\u00e0o li\u00ean k\u1ebft, t\u1eeb \u0111\u00f3 t\u0103ng s\u1ef1 ch\u1ee7 \u0111\u1ed9ng khi thao t\u00e1c.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;a href=\"#\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-title=\"Xem th\u00eam th\u00f4ng tin chi ti\u1ebft\"&gt;\n     Chi ti\u1ebft\n   &lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"281\" height=\"106\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-4.png\" alt=\"\" class=\"wp-image-90578\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-4.png 281w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-4-200x75.png 200w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><\/figure>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Tooltip tr\u00ean bi\u1ec3u t\u01b0\u1ee3ng (icon)<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Khi s\u1eed d\u1ee5ng bi\u1ec3u t\u01b0\u1ee3ng \u0111\u1ec3 thay th\u1ebf v\u0103n b\u1ea3n trong giao di\u1ec7n, vi\u1ec7c th\u00eam tooltip l\u00e0 r\u1ea5t c\u1ea7n thi\u1ebft \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o ng\u01b0\u1eddi d\u00f9ng hi\u1ec3u \u0111\u01b0\u1ee3c \u00fd ngh\u0129a c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng \u0111\u00f3. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;i class=\"bi bi-info-circle\" data-bs-toggle=\"tooltip\" data-bs-placement=\"right\" data-bs-title=\"Th\u00f4ng tin th\u00eam\"&gt;&lt;\/i&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"238\" height=\"81\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-5.png\" alt=\"\" class=\"wp-image-90579\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-5.png 238w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-5-200x68.png 200w\" sizes=\"auto, (max-width: 238px) 100vw, 238px\" \/><\/figure>\n\n\n\n<p>Tooltip th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng cho c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng nh\u01b0 d\u1ea5u ch\u1ea5m h\u1ecfi, c\u1ea3nh b\u00e1o, ch\u1ec9nh s\u1eeda, x\u00f3a\u2026 trong b\u1ea3ng d\u1eef li\u1ec7u, form ho\u1eb7c dashboard.<\/p>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>Tooltip tr\u00ean \u00f4 nh\u1eadp li\u1ec7u<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Trong c\u00e1c bi\u1ec3u m\u1eabu, tooltip gi\u00fap hi\u1ec3n th\u1ecb g\u1ee3i \u00fd nh\u1eadp li\u1ec7u ho\u1eb7c m\u00f4 t\u1ea3 ng\u1eafn g\u1ecdn v\u1ec1 \u0111\u1ecbnh d\u1ea1ng y\u00eau c\u1ea7u m\u00e0 kh\u00f4ng c\u1ea7n chi\u1ebfm th\u00eam kh\u00f4ng gian hi\u1ec3n th\u1ecb.<\/p>\n\n\n\n<p>Tooltip s\u1ebd t\u1ef1 \u0111\u1ed9ng hi\u1ec3n th\u1ecb khi ng\u01b0\u1eddi d\u00f9ng focus v\u00e0o \u00f4 nh\u1eadp. Tr\u01b0\u1eddng h\u1ee3p n\u00e0y r\u1ea5t ph\u00f9 h\u1ee3p \u0111\u1ec3 h\u01b0\u1edbng d\u1eabn ng\u01b0\u1eddi d\u00f9ng nh\u1eadp \u0111\u00fang \u0111\u1ecbnh d\u1ea1ng m\u00e0 kh\u00f4ng c\u1ea7n s\u1eed d\u1ee5ng th\u00eam d\u00f2ng m\u00f4 t\u1ea3 d\u01b0\u1edbi field.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"text\" class=\"form-control\" data-bs-toggle=\"tooltip\" data-bs-placement=\"right\" data-bs-title=\"Nh\u1eadp t\u00ean kh\u00f4ng d\u1ea5u, t\u1ed1i \u0111a 50 k\u00fd t\u1ef1\" placeholder=\"T\u00ean ng\u01b0\u1eddi d\u00f9ng\"&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"434\" height=\"105\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-6.png\" alt=\"\" class=\"wp-image-90580\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-6.png 434w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-6-300x73.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-6-200x48.png 200w\" sizes=\"auto, (max-width: 434px) 100vw, 434px\" \/><\/figure>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><strong>Tooltip tr\u00ean h\u00ecnh \u1ea3nh ho\u1eb7c v\u00f9ng \u0111\u1eb7c bi\u1ec7t<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Tooltip c\u0169ng c\u00f3 th\u1ec3 g\u1eafn v\u00e0o h\u00ecnh \u1ea3nh, logo ho\u1eb7c c\u00e1c th\u1ebb div, span, mi\u1ec5n l\u00e0 ph\u1ea7n t\u1eed \u0111\u00f3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c focus ho\u1eb7c hover.<\/p>\n\n\n\n<p>C\u00e1ch n\u00e0y th\u01b0\u1eddng \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng trong c\u00e1c trang qu\u1ea3n tr\u1ecb, b\u1ea3ng th\u1ed1ng k\u00ea ho\u1eb7c th\u1ebb ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec3 ti\u1ebft ki\u1ec7m kh\u00f4ng gian v\u00e0 cung c\u1ea5p th\u00eam th\u00f4ng tin ph\u1ee5 khi c\u1ea7n thi\u1ebft.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"https:\/\/itviec.com\/assets\/logo_black_text-04776232a37ae9091cddb3df1973277252b12ad19a16715f4486e603ade3b6a4.png\" width=\"50%\" height=\"50%\" data-bs-toggle=\"tooltip\" data-bs-placement=\"left\" data-bs-title=\"\u1ea2nh \u0111\u1ea1i di\u1ec7n c\u1ee7a ng\u01b0\u1eddi d\u00f9ng\"&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"505\" height=\"133\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-7.png\" alt=\"\" class=\"wp-image-90581\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-7.png 505w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-7-300x79.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-7-200x53.png 200w\" sizes=\"auto, (max-width: 505px) 100vw, 505px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-nhom-thu\u1ed9c-tinh-va-class-chinh-trong-tooltip-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_nhom_thuoc_tinh_va_class_chinh_trong_Tooltip_Bootstrap\"><\/span><strong>C\u00e1c nh\u00f3m thu\u1ed9c t\u00ednh v\u00e0 class ch\u00ednh trong Tooltip Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Tooltip trong Bootstrap \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf linh ho\u1ea1t v\u1edbi nhi\u1ec1u t\u00f9y ch\u1ecdn c\u1ea5u h\u00ecnh th\u00f4ng qua class, thu\u1ed9c t\u00ednh HTML (<strong>data-bs-*<\/strong>), c\u0169ng nh\u01b0 JavaScript.<\/p>\n\n\n\n<p>Vi\u1ec7c n\u1eafm r\u00f5 c\u00e1c nh\u00f3m thu\u1ed9c t\u00ednh v\u00e0 class ch\u00ednh s\u1ebd gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng ki\u1ec3m so\u00e1t c\u00e1ch tooltip hi\u1ec3n th\u1ecb, v\u1ecb tr\u00ed, hi\u1ec7u \u1ee9ng c\u0169ng nh\u01b0 t\u00f9y bi\u1ebfn giao di\u1ec7n. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 ba nh\u00f3m n\u1ed9i dung quan tr\u1ecdng nh\u1ea5t c\u1ea7n n\u1eafm khi s\u1eed d\u1ee5ng Tooltip.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-qu\u1ea3n-ly-n\u1ed9i-dung-c\u1ee7a-tooltip\"><strong>Qu\u1ea3n l\u00fd n\u1ed9i dung c\u1ee7a Tooltip<\/strong><\/h3>\n\n\n\n<p>N\u1ed9i dung ch\u00ednh c\u1ee7a tooltip \u0111\u01b0\u1ee3c khai b\u00e1o th\u00f4ng qua thu\u1ed9c t\u00ednh <strong>data-bs-title<\/strong> ho\u1eb7c <strong>title<\/strong>. Trong th\u1ef1c t\u1ebf, c\u1ea3 hai thu\u1ed9c t\u00ednh \u0111\u1ec1u \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3. Khi s\u1eed d\u1ee5ng <strong>title<\/strong>, Bootstrap s\u1ebd t\u1ef1 \u0111\u1ed9ng chuy\u1ec3n th\u00e0nh <strong>data-bs-title<\/strong> khi kh\u1edfi t\u1ea1o tooltip.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- D\u00f9ng title --&gt;\n&lt;a href=\"#\" data-bs-toggle=\"tooltip\" title=\"Tooltip hi\u1ec3n th\u1ecb m\u1eb7c \u0111\u1ecbnh\"&gt;Li\u00ean k\u1ebft 1&lt;\/a&gt;\n\n\n&lt;!-- D\u00f9ng data-bs-title --&gt;\n&lt;a href=\"#\" data-bs-toggle=\"tooltip\" data-bs-title=\"Tooltip s\u1eed d\u1ee5ng data-bs-title\"&gt;Li\u00ean k\u1ebft 2&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p><em>L\u01b0u \u00fd, Tooltip ch\u1ec9 hi\u1ec3n th\u1ecb khi n\u1ed9i dung kh\u00f4ng r\u1ed7ng, n\u1ebfu title ho\u1eb7c data-bs-title b\u1ecb thi\u1ebfu ho\u1eb7c \u0111\u1ec3 tr\u1ed1ng, tooltip s\u1ebd kh\u00f4ng xu\u1ea5t hi\u1ec7n.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-thay-d\u1ed5i-v\u1ecb-tri-c\u1ee7a-tooltip\"><strong>Thay \u0111\u1ed5i v\u1ecb tr\u00ed c\u1ee7a Tooltip<\/strong><\/h3>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, tooltip s\u1ebd hi\u1ec3n th\u1ecb \u1edf ph\u00eda tr\u00ean ph\u1ea7n t\u1eed (top). Tuy nhi\u00ean, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng thay \u0111\u1ed5i v\u1ecb tr\u00ed th\u00f4ng qua thu\u1ed9c t\u00ednh <strong>data-bs-placement<\/strong>. Bootstrap h\u1ed7 tr\u1ee3 b\u1ed1n v\u1ecb tr\u00ed ch\u00ednh: top, right, bottom, left.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;button class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"bottom\" data-bs-title=\"Tooltip hi\u1ec3n th\u1ecb b\u00ean d\u01b0\u1edbi\"&gt;\n     Di chu\u1ed9t v\u00e0o \u0111\u00e2y\n   &lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 khi thay 4 v\u1ecb tr\u00ed v\u00e0o thu\u1ed9c t\u00ednh <strong>data-bs-placement:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"286\" height=\"128\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/AD_4nXfex698_LGH6PCr1ynnb4nrJ-0vC0DfsEr2G-EpduUi6CprfAFnZy-jj6geUhQcE39Z6H2fbeZKFgDctETJ3RaPKT7flNamm5XOIZxAiYnvt3Yaqt3zesrNTvOJS6xTcMV3DnIlxw.png\" alt=\"\" class=\"wp-image-90863\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/AD_4nXfex698_LGH6PCr1ynnb4nrJ-0vC0DfsEr2G-EpduUi6CprfAFnZy-jj6geUhQcE39Z6H2fbeZKFgDctETJ3RaPKT7flNamm5XOIZxAiYnvt3Yaqt3zesrNTvOJS6xTcMV3DnIlxw.png 286w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/AD_4nXfex698_LGH6PCr1ynnb4nrJ-0vC0DfsEr2G-EpduUi6CprfAFnZy-jj6geUhQcE39Z6H2fbeZKFgDctETJ3RaPKT7flNamm5XOIZxAiYnvt3Yaqt3zesrNTvOJS6xTcMV3DnIlxw-200x90.png 200w\" sizes=\"auto, (max-width: 286px) 100vw, 286px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"256\" height=\"115\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-8.png\" alt=\"\" class=\"wp-image-90582\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-8.png 256w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-8-200x90.png 200w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"371\" height=\"84\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-9.png\" alt=\"\" class=\"wp-image-90583\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-9.png 371w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-9-300x68.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-9-200x45.png 200w\" sizes=\"auto, (max-width: 371px) 100vw, 371px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"86\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-10.png\" alt=\"\" class=\"wp-image-90584\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-10.png 368w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-10-300x70.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-10-200x47.png 200w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/figure>\n\n\n\n<p>Ngo\u00e0i ra, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <strong>placement=\u201cauto\u201d<\/strong>, Bootstrap s\u1ebd t\u1ef1 \u0111\u1ed9ng t\u00ednh to\u00e1n v\u1ecb tr\u00ed hi\u1ec3n th\u1ecb ph\u00f9 h\u1ee3p nh\u1ea5t d\u1ef1a v\u00e0o kh\u00f4ng gian hi\u1ec3n th\u1ecb hi\u1ec7n c\u00f3.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-hi\u1ec7u-\u1ee9ng\"><strong>T\u00f9y ch\u1ec9nh hi\u1ec7u \u1ee9ng<\/strong><\/h3>\n\n\n\n<p>Tooltip trong Bootstrap m\u1eb7c \u0111\u1ecbnh c\u00f3 hi\u1ec7u \u1ee9ng xu\u1ea5t hi\u1ec7n m\u1edd d\u1ea7n (fade). B\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh hi\u1ec7u \u1ee9ng hi\u1ec3n th\u1ecb, th\u1eddi gian tr\u1ec5 v\u00e0 giao di\u1ec7n b\u1eb1ng c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0 sau:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hi\u1ec7u \u1ee9ng fade<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Tooltip s\u1eed d\u1ee5ng hi\u1ec7u \u1ee9ng <strong>fade<\/strong> \u0111\u1ec3 l\u00e0m m\u1edd d\u1ea7n khi hi\u1ec3n th\u1ecb v\u00e0 \u1ea9n \u0111i. Hi\u1ec7u \u1ee9ng n\u00e0y \u0111\u01b0\u1ee3c b\u1eadt m\u1eb7c \u0111\u1ecbnh. N\u1ebfu mu\u1ed1n t\u1eaft, b\u1ea1n c\u00f3 th\u1ec3 truy\u1ec1n tu\u1ef3 ch\u1ecdn <strong>animation: false<\/strong> \u1edf \u0111o\u1ea1n m\u00e3 kh\u1edfi t\u1ea1o tooltip. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   new bootstrap.Tooltip(document.querySelector('#myTooltip'), {\n     animation: false\n   })<\/code><\/pre>\n\n\n\n<p>Vi\u1ec7c t\u1eaft hi\u1ec7u \u1ee9ng c\u00f3 th\u1ec3 h\u1eefu \u00edch trong nh\u1eefng tr\u01b0\u1eddng h\u1ee3p c\u1ea7n hi\u1ec3n th\u1ecb t\u1ee9c th\u00ec, ho\u1eb7c \u0111\u1ec3 t\u01b0\u01a1ng th\u00edch t\u1ed1t h\u01a1n v\u1edbi c\u00e1c thi\u1ebft b\u1ecb c\u00f3 hi\u1ec7u su\u1ea5t th\u1ea5p.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tu\u1ef3 ch\u1ec9nh th\u1eddi gian tr\u1ec5 khi hi\u1ec3n th\u1ecb ho\u1eb7c \u1ea9n tooltip<\/strong><\/li>\n<\/ul>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 thi\u1ebft l\u1eadp \u0111\u1ed9 tr\u1ec5 khi tooltip b\u1eaft \u0111\u1ea7u hi\u1ec3n th\u1ecb ho\u1eb7c bi\u1ebfn m\u1ea5t b\u1eb1ng thu\u1ed9c t\u00ednh <strong>data-bs-delay <\/strong>ho\u1eb7c javascript. Gi\u00e1 tr\u1ecb c\u00f3 th\u1ec3 l\u00e0 m\u1ed9t s\u1ed1 (\u00e1p d\u1ee5ng chung cho c\u1ea3 show v\u00e0 hide) ho\u1eb7c m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng v\u1edbi t\u1eebng gi\u00e1 tr\u1ecb ri\u00eang bi\u1ec7t.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 \u0111\u1ec3 \u00e1p d\u1ee5ng \u0111\u1ed9 tr\u1ec5 500ms khi hi\u1ec3n th\u1ecb v\u00e0 200ms khi \u1ea9n tooltip. B\u1ea1n c\u00f3 th\u1ec3 l\u00e0m nh\u01b0 sau:<\/p>\n\n\n\n<p>C\u00e1ch 1: D\u00f9ng <strong>data-bs-delay<\/strong> trong HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;button class=\"btn btn-info\" data-bs-toggle=\"tooltip\" data-bs-title=\"Hi\u1ec3n th\u1ecb sau 0.5 gi\u00e2y\" data-bs-delay='{\"show\": 500, \"hide\": 200}'&gt;\n     Tooltip c\u00f3 \u0111\u1ed9 tr\u1ec5\n   &lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>C\u00e1ch 2: Th\u00eam t\u00f9y ch\u1ecdn trong h\u00e0m kh\u1edfi t\u1ea1o tooltip<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   new bootstrap.Tooltip(document.querySelector('#myTooltip'), {\n     delay: { show: 500, hide: 200 }\n   })<\/code><\/pre>\n\n\n\n<p>Vi\u1ec7c thi\u1ebft l\u1eadp delay r\u1ea5t h\u1eefu \u00edch khi b\u1ea1n mu\u1ed1n tooltip kh\u00f4ng xu\u1ea5t hi\u1ec7n ngay l\u1eadp t\u1ee9c (tr\u00e1nh g\u00e2y r\u1ed1i cho ng\u01b0\u1eddi d\u00f9ng khi ch\u1ec9 l\u01b0\u1edbt qua).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tu\u1ef3 ch\u1ec9nh n\u1ed9i dung tooltip<\/strong><\/li>\n<\/ul>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, tooltip ch\u1ec9 hi\u1ec3n th\u1ecb n\u1ed9i dung d\u1ea1ng v\u0103n b\u1ea3n (text). N\u1ebfu mu\u1ed1n hi\u1ec3n th\u1ecb HTML nh\u01b0 in \u0111\u1eadm, in nghi\u00eang, ho\u1eb7c ch\u00e8n icon, b\u1ea1n c\u1ea7n b\u1eadt t\u00f9y ch\u1ecdn <strong>data-bs-html=\u201ctrue\u201d<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;button id=\"myTooltip\" class=\"btn btn-dark\" data-bs-toggle=\"tooltip\" data-bs-html=\"true\" data-bs-title='&lt;i class=\"bi bi-exclamation-triangle-fill text-warning me-1\"&gt;&lt;\/i&gt;&lt;b&gt;L\u01b0u \u00fd:&lt;\/b&gt; Kh\u00f4ng chia s\u1ebb th\u00f4ng tin c\u00e1 nh\u00e2n.'\n&gt;\n     C\u1ea3nh b\u00e1o\n   &lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"270\" height=\"130\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-11.png\" alt=\"\" class=\"wp-image-90585\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-11.png 270w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-11-200x96.png 200w\" sizes=\"auto, (max-width: 270px) 100vw, 270px\" \/><\/figure>\n\n\n\n<p><em>L\u01b0u \u00fd: Vi\u1ec7c b\u1eadt html: true c\u00f3 th\u1ec3 ti\u1ec1m \u1ea9n r\u1ee7i ro b\u1ea3o m\u1eadt n\u1ebfu n\u1ed9i dung tooltip \u0111\u1ebfn t\u1eeb ng\u01b0\u1eddi d\u00f9ng. H\u00e3y \u0111\u1ea3m b\u1ea3o d\u1eef li\u1ec7u \u0111\u00e3 \u0111\u01b0\u1ee3c ki\u1ec3m so\u00e1t ho\u1eb7c qua b\u1ed9 l\u1ecdc an to\u00e0n (sanitize).<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-lam-vi\u1ec7c-v\u1edbi-tooltip-b\u1eb1ng-javascript\"><span class=\"ez-toc-section\" id=\"Lam_viec_voi_Tooltip_bang_JavaScript\"><\/span><strong>L\u00e0m vi\u1ec7c v\u1edbi Tooltip b\u1eb1ng JavaScript<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ngo\u00e0i c\u00e1ch s\u1eed d\u1ee5ng Tooltip th\u00f4ng qua c\u00e1c thu\u1ed9c t\u00ednh HTML (<strong>data-bs-*<\/strong>), Bootstrap c\u00f2n cung c\u1ea5p API JavaScript m\u1ea1nh m\u1ebd gi\u00fap b\u1ea1n linh ho\u1ea1t ki\u1ec3m so\u00e1t qu\u00e1 tr\u00ecnh kh\u1edfi t\u1ea1o, hi\u1ec3n th\u1ecb, \u1ea9n ho\u1eb7c c\u1eadp nh\u1eadt n\u1ed9i dung Tooltip trong runtime. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch khi l\u00e0m vi\u1ec7c v\u1edbi n\u1ed9i dung \u0111\u1ed9ng, t\u01b0\u01a1ng t\u00e1c ph\u1ee9c t\u1ea1p ho\u1eb7c c\u1ea7n thay \u0111\u1ed5i h\u00e0nh vi m\u1eb7c \u0111\u1ecbnh.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-kh\u1edfi-t\u1ea1o-tooltip-b\u1eb1ng-javascript\"><strong>Kh\u1edfi t\u1ea1o Tooltip b\u1eb1ng JavaScript<\/strong><\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 kh\u1edfi t\u1ea1o Tooltip cho m\u1ed9t ph\u1ea7n t\u1eed c\u1ee5 th\u1ec3 b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>new<\/strong> bootstrap.Tooltip(element)<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3, tham s\u1ed1 truy\u1ec1n v\u00e0o l\u00e0 ph\u1ea7n t\u1eed DOM mu\u1ed1n \u00e1p d\u1ee5ng tooltip.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 kh\u1edfi t\u1ea1o m\u1ed9t tooltip c\u01a1 b\u1ea3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button id=\"myButton\" class=\"btn btn-dark\" data-bs-toggle=\"tooltip\" data-bs-title=\"tooltip c\u1ee7a button\"&gt;\n     N\u00fat b\u1ea5m\n&lt;\/button&gt;\n\n\n &lt;script&gt;\n   const el = document.getElementById('myButton')\n   const tooltip = new bootstrap.Tooltip(el)\n &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Ho\u1eb7c kh\u1edfi t\u1ea1o v\u1edbi tu\u1ef3 ch\u1ecdn c\u1ea5u h\u00ecnh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const el = document.getElementById('myButton')   \nconst tooltip = new bootstrap.Tooltip(el, {\n     placement: 'bottom',\n     animation: true,\n     html: true,\n     customClass: 'custom-tooltip',\n     delay: { show: 300, hide: 100 }\n   })<\/code><\/pre>\n\n\n\n<p>B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 kh\u1edfi t\u1ea1o h\u00e0ng lo\u1ea1t tooltip b\u1eb1ng c\u00e1ch qu\u00e9t t\u1ea5t c\u1ea3 ph\u1ea7n t\u1eed c\u00f3 data-bs-toggle=\u201ctooltip\u201d nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const tooltipTriggerList = document.querySelectorAll('&#91;data-bs-toggle=\"tooltip\"]')\nconst tooltipList = &#91;...tooltipTriggerList].map(el =&gt; new bootstrap.Tooltip(el))<\/code><\/pre>\n\n\n\n<p><em>L\u01b0u \u00fd: Tooltip ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng khi ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o th\u00e0nh c\u00f4ng v\u00e0 c\u00f3 n\u1ed9i dung data-bs-title ho\u1eb7c title.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cac-ph\u01b0\u01a1ng-th\u1ee9c-thao-tac-tooltip-trong-javascript\"><strong>C\u00e1c ph\u01b0\u01a1ng th\u1ee9c thao t\u00e1c Tooltip trong JavaScript<\/strong><\/h3>\n\n\n\n<p>Sau khi tooltip \u0111\u00e3 \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o, b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng c\u00e1c ph\u01b0\u01a1ng th\u1ee9c sau \u0111\u1ec3 thao t\u00e1c tr\u1ef1c ti\u1ebfp trong JavaScript. C\u00e1c ph\u01b0\u01a1ng th\u1ee9c n\u00e0y ch\u1ec9 d\u00f9ng \u0111\u01b0\u1ee3c sau khi b\u1ea1n \u0111\u00e3 kh\u1edfi t\u1ea1o m\u1ed9t instance (phi\u00ean b\u1ea3n c\u1ee5 th\u1ec3) c\u1ee7a <strong>bootstrap.Tooltip <\/strong>cho ph\u1ea7n t\u1eed HTML.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const el = document.getElementById('myButton')\nconst instance_tooltip = new bootstrap.Tooltip(el)\ntooltip.show()<\/code><\/pre>\n\n\n\n<p>L\u00fac n\u00e0y, <strong>instance_tooltip<\/strong> l\u00e0 m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng \u0111\u1ea1i di\u1ec7n cho tooltip c\u1ee7a ph\u1ea7n t\u1eed <strong>#myButton<\/strong>, v\u00e0 b\u1ea1n c\u00f3 th\u1ec3 thao t\u00e1c v\u1edbi n\u00f3 qua c\u00e1c ph\u01b0\u01a1ng th\u1ee9c c\u00f3 s\u1eb5n.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Ph\u01b0\u01a1ng th\u1ee9c<\/strong><\/td><td><strong>M\u00f4 t\u1ea3<\/strong><\/td><\/tr><tr><td><strong>show()<\/strong><\/td><td>Hi\u1ec3n th\u1ecb tooltip ngay l\u1eadp t\u1ee9c<\/td><\/tr><tr><td><strong>hide()<\/strong><\/td><td>\u1ea8n tooltip n\u1ebfu \u0111ang hi\u1ec3n th\u1ecb<\/td><\/tr><tr><td><strong>toggle()<\/strong><\/td><td>B\u1eadt\/t\u1eaft tooltip<\/td><\/tr><tr><td><strong>dispose()<\/strong><\/td><td>H\u1ee7y v\u00e0 g\u1ee1 tooltip kh\u1ecfi DOM<\/td><\/tr><tr><td><strong>enable() \/ disable()<\/strong><\/td><td>B\u1eadt\/t\u1eaft kh\u1ea3 n\u0103ng hi\u1ec3n th\u1ecb tooltip<\/td><\/tr><tr><td><strong>toggleEnabled()<\/strong><\/td><td>\u0110\u1ea3o tr\u1ea1ng th\u00e1i b\u1eadt\/t\u1eaft tooltip<\/td><\/tr><tr><td><strong>setContent()<\/strong><\/td><td>Thay \u0111\u1ed5i n\u1ed9i dung tooltip sau khi kh\u1edfi t\u1ea1o<\/td><\/tr><tr><td><strong>update()<\/strong><\/td><td>C\u1eadp nh\u1eadt l\u1ea1i v\u1ecb tr\u00ed tooltip (h\u1eefu \u00edch khi b\u1ed1 c\u1ee5c thay \u0111\u1ed5i)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5: c\u1eadp nh\u1eadt n\u1ed9i dung tooltip sau khi \u0111\u00e3 kh\u1edfi t\u1ea1o<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const tooltip = bootstrap.Tooltip.getInstance(document.getElementById('myButton'))\n\n\ntooltip.setContent({\n '.tooltip-inner': '&lt;b&gt;Th\u00f4ng tin m\u1edbi&lt;\/b&gt; \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt!'\n})<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-m\u1ed9t-s\u1ed1-l\u01b0u-y-khi-s\u1eed-d\u1ee5ng-tooltip-bootstrap\"><span class=\"ez-toc-section\" id=\"Mot_so_luu_y_khi_su_dung_Tooltip_Bootstrap\"><\/span><strong>M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Tooltip Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Khi l\u00e0m vi\u1ec7c v\u1edbi Tooltip trong Bootstrap, c\u00f3 m\u1ed9t s\u1ed1 \u0111i\u1ec3m quan tr\u1ecdng c\u1ea7n n\u1eafm r\u00f5 \u0111\u1ec3 tr\u00e1nh g\u1eb7p l\u1ed7i ho\u1eb7c h\u00e0nh vi kh\u00f4ng nh\u01b0 mong mu\u1ed1n trong giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng l\u01b0u \u00fd c\u1ea7n thi\u1ebft m\u00e0 b\u1ea1n n\u00ean xem x\u00e9t k\u1ef9 tr\u01b0\u1edbc khi tri\u1ec3n khai:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Tooltip c\u1ea7n \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o th\u1ee7 c\u00f4ng<\/strong>: Tooltip kh\u00f4ng \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t t\u1ef1 \u0111\u1ed9ng v\u00ec Bootstrap mu\u1ed1n t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng. V\u00ec v\u1eady, b\u1ea1n c\u1ea7n ch\u1ee7 \u0111\u1ed9ng kh\u1edfi t\u1ea1o ch\u00fang b\u1eb1ng JavaScript.<\/li>\n\n\n\n<li><strong>Tooltip s\u1ebd kh\u00f4ng hi\u1ec3n th\u1ecb n\u1ebfu kh\u00f4ng c\u00f3 n\u1ed9i dung<\/strong>: Tooltip y\u00eau c\u1ea7u c\u00f3 <strong>title<\/strong> ho\u1eb7c <strong>data-bs-title <\/strong>h\u1ee3p l\u1ec7. N\u1ebfu tr\u01b0\u1eddng n\u00e0y tr\u1ed1ng ho\u1eb7c kh\u00f4ng t\u1ed3n t\u1ea1i, tooltip s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c render.<\/li>\n\n\n\n<li><strong>Tooltip kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng v\u1edbi ph\u1ea7n t\u1eed b\u1ecb \u1ea9n ho\u1eb7c ph\u1ea7n t\u1eed disabled<\/strong>: N\u1ebfu ph\u1ea7n t\u1eed b\u1ecb display: none ho\u1eb7c disabled, tooltip s\u1ebd kh\u00f4ng hi\u1ec3n th\u1ecb khi b\u1ea1n c\u1ed1 g\u1eafng k\u00edch ho\u1ea1t n\u00f3.<\/li>\n\n\n\n<li><strong>Tooltip ph\u1ee5 thu\u1ed9c v\u00e0o Popper.js \u0111\u1ec3 \u0111\u1ecbnh v\u1ecb ch\u00ednh x\u00e1c<\/strong>: Bootstrap s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n <a href=\"http:\/\/popper.js\" target=\"_blank\" rel=\"noreferrer noopener\">Popper.js<\/a> \u0111\u1ec3 Tooltip hi\u1ec3n th\u1ecb \u0111\u00fang v\u1ecb tr\u00ed v\u00e0 t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh khi v\u01b0\u1ee3t kh\u1ecfi m\u00e0n h\u00ecnh. H\u00e3y ch\u1eafc ch\u1eafn b\u1ea1n \u0111\u00e3 c\u00f3 <a href=\"http:\/\/popper.js\" target=\"_blank\" rel=\"noreferrer noopener\">Popper.js<\/a> trong m\u00e3 ngu\u1ed3n c\u1ee7a m\u00ecnh.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-luy\u1ec7n-t\u1eadp-s\u1eed-d\u1ee5ng-tooltip\"><span class=\"ez-toc-section\" id=\"Bai_tap_luyen_tap_su_dung_Tooltip\"><\/span><strong>B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng Tooltip<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 3 b\u00e0i t\u1eadp th\u1ef1c h\u00e0nh theo c\u1ea5p \u0111\u1ed9 t\u1eeb d\u1ec5 \u0111\u1ebfn n\u00e2ng cao \u0111\u1ec3 b\u1ea1n l\u00e0m quen v\u00e0 n\u1eafm v\u1eefng c\u00e1ch s\u1eed d\u1ee5ng Tooltip trong Bootstrap.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>B\u00e0i t\u1eadp c\u01a1 b\u1ea3n: th\u00eam Tooltip cho m\u1ed9t n\u00fat c\u00f3 n\u1ed9i dung \u201cXem th\u00eam\u201d v\u1edbi n\u1ed9i dung tooltip l\u00e0 \u201cHi\u1ec3n th\u1ecb th\u00eam th\u00f4ng tin chi ti\u1ebft\u201d.<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"316\" height=\"133\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-12.png\" alt=\"\" class=\"wp-image-90588\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-12.png 316w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-12-300x126.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-12-200x84.png 200w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/figure>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>B\u00e0i t\u1eadp trung b\u00ecnh: t\u1ea1o 4 n\u00fat v\u1edbi Tooltip xu\u1ea5t hi\u1ec7n l\u1ea7n l\u01b0\u1ee3t \u1edf c\u00e1c v\u1ecb tr\u00ed: top, right, bottom, left<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"185\" height=\"103\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-13.png\" alt=\"\" class=\"wp-image-90589\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"226\" height=\"69\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-14.png\" alt=\"\" class=\"wp-image-90590\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-14.png 226w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-14-200x61.png 200w\" sizes=\"auto, (max-width: 226px) 100vw, 226px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"171\" height=\"98\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-15.png\" alt=\"\" class=\"wp-image-90591\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"219\" height=\"71\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-16.png\" alt=\"\" class=\"wp-image-90592\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-16.png 219w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-16-200x65.png 200w\" sizes=\"auto, (max-width: 219px) 100vw, 219px\" \/><\/figure>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>B\u00e0i t\u1eadp n\u00e2ng cao: t\u1ea1o m\u1ed9t n\u00fat c\u00f3 tooltip s\u1eed d\u1ee5ng HTML \u0111\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng b\u00e1o v\u1edbi m\u00e0u n\u1ec1n tu\u1ef3 ch\u1ec9nh v\u00e0 icon c\u1ea3nh b\u00e1o.<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"247\" height=\"131\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-17.png\" alt=\"\" class=\"wp-image-90593\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-17.png 247w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/image-17-200x106.png 200w\" sizes=\"auto, (max-width: 247px) 100vw, 247px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-l\u1eddi-gi\u1ea3i\"><strong>L\u1eddi gi\u1ea3i<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>B\u00e0i t\u1eadp c\u01a1 b\u1ea3n<\/strong><\/li>\n<\/ol>\n\n\n\n<p>S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <strong>data-bs-toggle=\u201ctooltip\u201d<\/strong> v\u00e0 <strong>data-bs-title<\/strong> \u0111\u1ec3 kh\u1edfi t\u1ea1o n\u1ed9i dung tooltip. Sau \u0111\u00f3, d\u00f9ng JS \u0111\u1ec3 k\u00edch ho\u1ea1t tooltip.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;button class=\"btn btn-primary\" data-bs-toggle=\"tooltip\" data-bs-title=\"Hi\u1ec3n th\u1ecb th\u00eam th\u00f4ng tin chi ti\u1ebft\"&gt;\n     Xem th\u00eam\n   &lt;\/button&gt;\n\n &lt;script&gt;\n   const el = document.getElementById('myButton');\n   new bootstrap.Tooltip(el);\n &lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>B\u00e0i t\u1eadp trung b\u00ecnh<\/strong><\/li>\n<\/ol>\n\n\n\n<p>S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <strong>data-bs-placement<\/strong> gi\u00fap b\u1ea1n t\u00f9y ch\u1ec9nh v\u1ecb tr\u00ed xu\u1ea5t hi\u1ec7n c\u1ee7a Tooltip so v\u1edbi ph\u1ea7n t\u1eed g\u1ed1c, b\u00ean c\u1ea1nh s\u1eed d\u1ee5ng v\u00f2ng l\u1eb7p javascript \u0111\u1ec3 l\u00e0m g\u1ecdn code kh\u1edfi t\u1ea1o tooltip.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;button class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-title=\"Tooltip ph\u00eda tr\u00ean\"&gt;Tr\u00ean&lt;\/button&gt;\n   &lt;button class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"right\" data-bs-title=\"Tooltip b\u00ean ph\u1ea3i\"&gt;Ph\u1ea3i&lt;\/button&gt;\n   &lt;button class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"bottom\" data-bs-title=\"Tooltip ph\u00eda d\u01b0\u1edbi\"&gt;D\u01b0\u1edbi&lt;\/button&gt;\n   &lt;button class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"left\" data-bs-title=\"Tooltip b\u00ean tr\u00e1i\"&gt;Tr\u00e1i&lt;\/button&gt;\n\n\n &lt;script&gt;\n   const tooltipTriggerList = document.querySelectorAll('&#91;data-bs-toggle=\"tooltip\"]');\n   &#91;...tooltipTriggerList].forEach(el =&gt; new bootstrap.Tooltip(el));\n &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>B\u00e0i t\u1eadp n\u00e2ng cao<\/strong><\/li>\n<\/ol>\n\n\n\n<p>S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh data-bs-html=\u201ctrue\u201d \u0111\u1ec3 cho ph\u00e9p Tooltip c\u00f3 th\u1ec3 ch\u1ee9a HTML trong ph\u1ea7n n\u1ed9i dung v\u00e0 th\u00eam thu\u1ed9c t\u00ednh <strong>data-bs-custom-class<\/strong> \u0111\u1ec3 class t\u00f9y ch\u1ec9nh, cho ph\u00e9p b\u1ea1n thay \u0111\u1ed5i m\u00e0u s\u1eafc v\u00e0 ki\u1ec3u hi\u1ec3n th\u1ecb theo nhu c\u1ea7u.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;button class=\"btn btn-dark\" data-bs-toggle=\"tooltip\" data-bs-html=\"true\" data-bs-custom-class=\"custom-tooltip\" data-bs-title=\"&lt;b&gt;\u26a0\ufe0f C\u1ea3nh b\u00e1o:&lt;\/b&gt; Kh\u00f4ng chia s\u1ebb th\u00f4ng tin c\u00e1 nh\u00e2n.\"&gt;\n    Th\u00f4ng b\u00e1o\n &lt;\/button&gt;\n\n\n &lt;style&gt;\n   .custom-tooltip {\n     --bs-tooltip-bg: #dc3545;\n     --bs-tooltip-color: #fff;\n     font-size: 14px;\n   }\n &lt;\/style&gt;\n\n\n &lt;script&gt;\n   const tooltipTriggerList = document.querySelectorAll('&#91;data-bs-toggle=\"tooltip\"]');\n   &#91;...tooltipTriggerList].forEach(el =&gt; new bootstrap.Tooltip(el));\n &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-nh\u1ecf-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-tooltip-boostrap\"><span class=\"ez-toc-section\" id=\"Cau_nho_thuong_gap_ve_Tooltip_Boostrap\"><\/span><strong>C\u00e2u nh\u1ecf th\u01b0\u1eddng g\u1eb7p v\u1ec1 Tooltip Boostrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tooltip-co-ho\u1ea1t-d\u1ed9ng-tren-ph\u1ea7n-t\u1eed-b\u1ecb-disabled-khong\"><strong>Tooltip c\u00f3 ho\u1ea1t \u0111\u1ed9ng tr\u00ean ph\u1ea7n t\u1eed b\u1ecb disabled kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Tooltip kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng tr\u1ef1c ti\u1ebfp tr\u00ean c\u00e1c ph\u1ea7n t\u1eed b\u1ecb disabled, nh\u01b0 &lt;button disabled&gt;, v\u00ec c\u00e1c ph\u1ea7n t\u1eed n\u00e0y kh\u00f4ng th\u1ec3 nh\u1eadn s\u1ef1 ki\u1ec7n t\u01b0\u01a1ng t\u00e1c nh\u01b0 hover, focus, ho\u1eb7c click, trong khi \u0111\u00e2y ch\u00ednh l\u00e0 c\u00e1c s\u1ef1 ki\u1ec7n m\u00e0 tooltip c\u1ea7n \u0111\u1ec3 hi\u1ec3n th\u1ecb. \u0110\u1ec3 x\u1eed l\u00fd tr\u01b0\u1eddng h\u1ee3p n\u00e0y, b\u1ea1n h\u00e3y b\u1ecdc ph\u1ea7n t\u1eed b\u1ecb disabled trong m\u1ed9t ph\u1ea7n t\u1eed kh\u00e1c nh\u01b0 &lt;span&gt; v\u00e0 g\u00e1n tooltip cho ph\u1ea7n t\u1eed bao ngo\u00e0i. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span class=\"d-inline-block\" tabindex=\"0\" data-bs-toggle=\"tooltip\" data-bs-title=\"N\u00fat b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a\"&gt;\n    &lt;button class=\"btn btn-secondary\" disabled&gt;Disabled&lt;\/button&gt;\n&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-sao-d\u1ec3-tooltip-hi\u1ec3n-th\u1ecb-khi-click-thay-vi-hover\"><strong>L\u00e0m sao \u0111\u1ec3 tooltip hi\u1ec3n th\u1ecb khi click thay v\u00ec hover?<\/strong><\/h3>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, tooltip \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi c\u00f3 s\u1ef1 ki\u1ec7n hover v\u00e0o ph\u1ea7n t\u1eed ch\u1ec9 \u0111\u1ecbnh, \u0111\u1ec3 thay \u0111\u1ed5i h\u00e0nh vi n\u00e0y th\u00e0nh click, b\u1ea1n c\u1ea7n thay \u0111\u1ed5i thu\u1ed9c t\u00ednh trigger khi kh\u1edfi t\u1ea1o tooltip:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> const el = document.getElementById('myButton');\n new bootstrap.Tooltip(el, { trigger: 'click' });<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tooltip-co-t\u1ef1-d\u1ed9ng-di\u1ec1u-ch\u1ec9nh-v\u1ecb-tri-n\u1ebfu-b\u1ecb-che-khong\"><strong>Tooltip c\u00f3 t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed n\u1ebfu b\u1ecb che kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Tooltip s\u1eed d\u1ee5ng Popper.js \u0111\u1ec3 x\u1eed l\u00fd v\u1ecb tr\u00ed, n\u1ebfu v\u1ecb tr\u00ed ban \u0111\u1ea7u b\u1ecb che, Popper s\u1ebd c\u1ed1 g\u1eafng \u0111i\u1ec1u ch\u1ec9nh tooltip sang h\u01b0\u1edbng kh\u00e1c ph\u00f9 h\u1ee3p. Ngo\u00e0i ra, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <strong>placement=\u201cauto\u201d<\/strong> \u0111\u1ec3 Bootstrap s\u1ebd t\u1ef1 \u0111\u1ed9ng t\u00ednh to\u00e1n v\u1ecb tr\u00ed hi\u1ec3n th\u1ecb ph\u00f9 h\u1ee3p nh\u1ea5t d\u1ef1a v\u00e0o kh\u00f4ng gian hi\u1ec3n th\u1ecb hi\u1ec7n c\u00f3.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;button class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"auto\" data-bs-title=\"Tooltip hi\u1ec3n th\u1ecb t\u1ef1 \u0111\u1ed9ng\"&gt;\n     Di chu\u1ed9t v\u00e0o \u0111\u00e2y\n   &lt;\/button&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><strong>T\u1ed5ng k\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Tooltip trong Bootstrap l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 nh\u1ecf nh\u01b0ng v\u00f4 c\u00f9ng h\u1eefu \u00edch \u0111\u1ec3 n\u00e2ng cao tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng b\u1eb1ng c\u00e1ch hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung m\u1ed9t c\u00e1ch tinh t\u1ebf v\u00e0 ti\u1ebft ki\u1ec7m kh\u00f4ng gian. V\u1edbi h\u1ec7 th\u1ed1ng thu\u1ed9c t\u00ednh linh ho\u1ea1t, h\u1ed7 tr\u1ee3 hi\u1ec7u \u1ee9ng m\u01b0\u1ee3t m\u00e0 v\u00e0 kh\u1ea3 n\u0103ng t\u01b0\u01a1ng t\u00e1c m\u1ea1nh m\u1ebd, tooltip Bootstrap ph\u00f9 h\u1ee3p v\u1edbi m\u1ecdi lo\u1ea1i giao di\u1ec7n t\u1eeb \u0111\u01a1n gi\u1ea3n \u0111\u1ebfn ph\u1ee9c t\u1ea1p. Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hy v\u1ecdng b\u1ea1n \u0111\u00e3 n\u1eafm v\u1eefng c\u00e1ch s\u1eed d\u1ee5ng, t\u00f9y ch\u1ec9nh v\u00e0 x\u1eed l\u00fd c\u00e1c t\u00ecnh hu\u1ed1ng \u0111\u1eb7c bi\u1ec7t khi l\u00e0m vi\u1ec7c v\u1edbi tooltip trong Bootstrap, t\u1eeb \u0111\u00f3 \u1ee9ng d\u1ee5ng hi\u1ec7u qu\u1ea3 v\u00e0o d\u1ef1 \u00e1n web th\u1ef1c t\u1ebf c\u1ee7a m\u00ecnh.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, ng\u01b0\u1eddi d\u00f9ng lu\u00f4n mong mu\u1ed1n c\u00f3 th\u00f4ng tin nhanh ch\u00f3ng m\u00e0 kh\u00f4ng c\u1ea7n r\u1eddi kh\u1ecfi m\u00e0n h\u00ecnh ch\u00ednh. \u0110\u00e2y ch\u00ednh l\u00e0 l\u00fac Tooltip ph\u00e1t huy t\u00e1c d\u1ee5ng: hi\u1ec3n th\u1ecb n\u1ed9i dung ng\u1eafn g\u1ecdn ngay khi ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c nh\u1eb9 nh\u01b0 di chu\u1ed9t ho\u1eb7c focus v\u00e0o ph\u1ea7n t\u1eed n\u00e0o [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":90861,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[10352,109],"tags":[],"class_list":["post-90572","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap-chuyen-mon-it","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Tooltip Bootstrap: H\u01b0\u1edbng d\u1eabn c\u00e1ch hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Chi ti\u1ebft c\u00e1ch s\u1eed d\u1ee5ng Tooltip Bootstrap \u0111\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng tin ng\u1eafn g\u1ecdn, t\u1eeb kh\u1edfi t\u1ea1o, t\u00f9y ch\u1ec9nh, hi\u1ec7u \u1ee9ng, t\u01b0\u01a1ng t\u00e1c v\u00e0 b\u00e0i t\u1eadp luy\u1ec7n t\u1eadp.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tooltip Bootstrap: H\u01b0\u1edbng d\u1eabn c\u00e1ch hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung\" \/>\n<meta property=\"og:description\" content=\"Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, ng\u01b0\u1eddi d\u00f9ng lu\u00f4n mong mu\u1ed1n c\u00f3 th\u00f4ng tin nhanh ch\u00f3ng m\u00e0 kh\u00f4ng c\u1ea7n r\u1eddi kh\u1ecfi m\u00e0n h\u00ecnh ch\u00ednh. \u0110\u00e2y ch\u00ednh l\u00e0 l\u00fac Tooltip ph\u00e1t huy\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-01T06:50:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T06:50:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/tooltip-bootstrap-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1347\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tooltip Bootstrap: H\u01b0\u1edbng d\u1eabn c\u00e1ch hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung - ITviec Blog","description":"Chi ti\u1ebft c\u00e1ch s\u1eed d\u1ee5ng Tooltip Bootstrap \u0111\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng tin ng\u1eafn g\u1ecdn, t\u1eeb kh\u1edfi t\u1ea1o, t\u00f9y ch\u1ec9nh, hi\u1ec7u \u1ee9ng, t\u01b0\u01a1ng t\u00e1c v\u00e0 b\u00e0i t\u1eadp luy\u1ec7n t\u1eadp.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/","og_locale":"vi_VN","og_type":"article","og_title":"Tooltip Bootstrap: H\u01b0\u1edbng d\u1eabn c\u00e1ch hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung","og_description":"Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, ng\u01b0\u1eddi d\u00f9ng lu\u00f4n mong mu\u1ed1n c\u00f3 th\u00f4ng tin nhanh ch\u00f3ng m\u00e0 kh\u00f4ng c\u1ea7n r\u1eddi kh\u1ecfi m\u00e0n h\u00ecnh ch\u00ednh. \u0110\u00e2y ch\u00ednh l\u00e0 l\u00fac Tooltip ph\u00e1t huy","og_url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-09-01T06:50:01+00:00","article_modified_time":"2025-09-01T06:50:04+00:00","og_image":[{"width":2560,"height":1347,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/tooltip-bootstrap-scaled.png","type":"image\/png"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"20 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Tooltip Bootstrap: H\u01b0\u1edbng d\u1eabn c\u00e1ch hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung","datePublished":"2025-09-01T06:50:01+00:00","dateModified":"2025-09-01T06:50:04+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/"},"wordCount":4245,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/tooltip-bootstrap-scaled.png","articleSection":["Bootstrap","Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/","url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/","name":"Tooltip Bootstrap: H\u01b0\u1edbng d\u1eabn c\u00e1ch hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/tooltip-bootstrap-scaled.png","datePublished":"2025-09-01T06:50:01+00:00","dateModified":"2025-09-01T06:50:04+00:00","description":"Chi ti\u1ebft c\u00e1ch s\u1eed d\u1ee5ng Tooltip Bootstrap \u0111\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng tin ng\u1eafn g\u1ecdn, t\u1eeb kh\u1edfi t\u1ea1o, t\u00f9y ch\u1ec9nh, hi\u1ec7u \u1ee9ng, t\u01b0\u01a1ng t\u00e1c v\u00e0 b\u00e0i t\u1eadp luy\u1ec7n t\u1eadp.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/tooltip-bootstrap-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/08\/tooltip-bootstrap-scaled.png","width":800,"height":421,"caption":"tooltip bootstrap - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-tooltip-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Tooltip Bootstrap: H\u01b0\u1edbng d\u1eabn c\u00e1ch hi\u1ec3n th\u1ecb th\u00f4ng tin b\u1ed5 sung"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc-2\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/90572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=90572"}],"version-history":[{"count":5,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/90572\/revisions"}],"predecessor-version":[{"id":90864,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/90572\/revisions\/90864"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/90861"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=90572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=90572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=90572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}