{"id":2768,"date":"2022-12-23T06:31:50","date_gmt":"2022-12-23T06:31:50","guid":{"rendered":"https:\/\/www.copycat.dev\/blog\/?p=2768"},"modified":"2023-03-23T05:02:29","modified_gmt":"2023-03-23T05:02:29","slug":"bootstrap-tooltip","status":"publish","type":"post","link":"https:\/\/www.copycat.dev\/blog\/bootstrap-tooltip\/","title":{"rendered":"How to use Bootstrap Tooltip Efficiently"},"content":{"rendered":"<div class=\"convertful-189269\"><\/div>\n\n\n\n<p>Do you want to be more efficient? Consider <a href=\"https:\/\/www.copycat.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">CopyCat<\/a>, an AI-powered plugin that will convert your Figma design to UI code, allowing you to concentrate on the app&#8217;s business logic.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/www.copycat.dev\/design-to-code\" style=\"background-color:#7b3beb\">Convert Design to Code with CopyCat<\/a><\/div>\n<\/div>\n\n\n\n<div id=\"rtoc-mokuji-wrapper\" class=\"rtoc-mokuji-content frame3 preset2 animation-fade rtoc_open noto-sans\" data-id=\"2768\" data-theme=\"CopyCat Theme\">\n\t\t\t<div id=\"rtoc-mokuji-title\" class=\" rtoc_left\">\n\t\t\t<button class=\"rtoc_open_close rtoc_open\"><\/button>\n\t\t\t<span>Table of Contents<\/span>\n\t\t\t<\/div><ol class=\"rtoc-mokuji decimal_ol level-1\"><li class=\"rtoc-item\"><a href=\"#rtoc-1\">Introduction<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-2\">What is a Bootstrap Tooltip?<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-3\">Bootstrap Popover vs Tooltip?<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-4\">Setting Up Bootstrap<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-5\">How to Enable Tooltip in Bootstrap 5<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-6\">How to make a Hover Tooltip in Bootstrap<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-7\">Customizing Bootstrap Tooltip<\/a><ul class=\"rtoc-mokuji mokuji_ul level-2\"><li class=\"rtoc-item\"><a href=\"#rtoc-8\">Changing Bootstrap Tooltip Background Color<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-9\">Changing Bootstrap Tooltip Arrow Tail<\/a><\/li><\/ul><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-10\">Adding Tooltips to Disabled Elements<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-11\">Adding Tooltips to an Anchor Tag - Links<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-12\">Bootstrap Tooltip Positioning<\/a><ul class=\"rtoc-mokuji mokuji_ul level-2\"><li class=\"rtoc-item\"><a href=\"#rtoc-13\">Tooltip Position Top<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-14\">Tooltip Position Right<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-15\">Tooltip Position Left<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-16\">Tooltip Position Bottom<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-17\">Tooltip Invalid Position<\/a><\/li><\/ul><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-18\">Wrapping Up<\/a><ul class=\"rtoc-mokuji mokuji_ul level-2\"><li class=\"rtoc-item\"><a href=\"#rtoc-19\"><strong>Interesting Reads From Our Blogs<\/strong><\/a><\/li><\/ul><\/li><\/ol><\/div><h2 id=\"rtoc-1\"  class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>This article will show you how to use the Bootstrap tooltip classes to add tooltips to HTML elements such as buttons, links, text, and input.<\/p>\n\n\n\n<h2 id=\"rtoc-2\"  class=\"wp-block-heading\">What is a Bootstrap Tooltip?<\/h2>\n\n\n\n<p>A Bootstrap tooltip is a small box with a pointer tail that appears when a user focuses on or moves their mouse over an element. In addition, the tooltip popup contains some brief information about the element to which it is attached.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670577854859\/MwIF2wyQ_.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Above is a <a href=\"https:\/\/www.copycat.dev\/blog\/bootstrap-button\/\">bootstrap button<\/a> that displays a tooltip with more information when hovered or focused.<\/p>\n\n\n\n<p>The Bootstrap tooltip is implemented through the use of CSS and JavaScript, with CSS3 for animations and data-bs-attributes for local title storage.<\/p>\n\n\n\n<h2 id=\"rtoc-3\"  class=\"wp-block-heading\">Bootstrap Popover vs Tooltip?<\/h2>\n\n\n\n<p>Bootstrap tooltips are small boxes that appear beside their paired element when hovered, focused, or clicked, whereas <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.0\/components\/popovers\/\">Bootstrap popovers<\/a> by default appear only when their paired element is clicked.<\/p>\n\n\n\n<p>Given these points, below is a table showing the difference between Bootstrap popover and tooltips.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Bootstrap Popover<\/th><th>Bootstrap Tooltip<\/th><\/tr><\/thead><tbody><tr><td>Has heading title<\/td><td>Does not have a heading title<\/td><\/tr><tr><td>Requires tooltip plugin<\/td><td>It&#8217;s already a tooltip<\/td><\/tr><tr><td>Triggered on click or hover (Triggering of the tooltip by hover requires additional settings).<\/td><td>Triggered on hover, focus, or click.<\/td><\/tr><tr><td>Supports additional interaction such as buttons.<\/td><td>Does not allow additional interaction such as buttons.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 id=\"rtoc-4\"  class=\"wp-block-heading\">Setting Up Bootstrap<\/h2>\n\n\n\n<p>We&#8217;ll make use of the <a href=\"https:\/\/www.copycat.dev\/blog\/bootstrap-cdn\/\">Bootstrap CDN<\/a> to set up bootstrap in our project.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a new <code>index.html<\/code> file.<\/li>\n\n\n\n<li>Next, copy and paste the code below inside:<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n\n    &lt;!-- Bootstrap CSS --&gt;\n    &lt;link\n      href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css&quot;\n      rel=&quot;stylesheet&quot;\n      integrity=&quot;sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot;\n      crossorigin=&quot;anonymous&quot;\n    \/&gt;\n\n    &lt;!-- Bootstrap Bundle - JavaScript plugins and Popper --&gt;\n    &lt;script\n      src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js&quot;\n      integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM&quot;\n      crossorigin=&quot;anonymous&quot;\n    &gt;&lt;\/script&gt;\n\n    &lt;title&gt;Bootstrap Tooltip&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body class=&quot;d-flex vh-100 align-items-center justify-content-center&quot;&gt;\n    &lt;h2 class=&quot;text-primary&quot;&gt;Hello \ud83d\udc4b\ud83d\ude03&lt;\/h2&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n\n\n<\/pre><\/div>\n\n\n<p>When you open <code>index.html<\/code> in a browser, your page should look something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670585626722\/ETANDLwjR.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>If the text is blue and centered on the page, then bootstrap is properly connected to your project.<\/p>\n\n\n\n<h2 id=\"rtoc-5\"  class=\"wp-block-heading\">How to Enable Tooltip in Bootstrap 5<\/h2>\n\n\n\n<p>To enable tooltip bootstrap in your project, we need a JavaScript script pre-written by the bootstrap team.<\/p>\n\n\n\n<p>Include the<code> &lt;script&gt;<\/code> within the <code>&lt;body&gt;<\/code> tag in the <code>index.html<\/code> file as shown:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;script&gt;\n    var tooltipTriggerList = &#091;].slice.call(\n    document.querySelectorAll('&#091;data-bs-toggle=&quot;tooltip&quot;]')\n    );\n    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {\n    return new bootstrap.Tooltip(tooltipTriggerEl);\n    });\n&lt;\/script&gt;\n<\/pre><\/div>\n\n\n<p>The script above is used to select all the HTML elements with <code>data-bs-toggle<\/code> attribute with a value of <code>tooltip<\/code>. A tooltip is initialized for each matching element by the bootstrap <code>Tooltip<\/code> method.<\/p>\n\n\n\n<p>The <code>data-bs-toggle<\/code> attribute was formerly <code>data-toggle<\/code> and was changed to be able to distinguish between bootstrap <code>-bs-<\/code> data attribute and other third-party attributes.<\/p>\n\n\n\n<h2 id=\"rtoc-6\"  class=\"wp-block-heading\">How to make a Hover Tooltip in Bootstrap<\/h2>\n\n\n\n<p>To create a tooltip for an element, the element must have a <code>data-bs-toggle <\/code>attribute so it can be selected and have a tooltip enabled by the bootstrap script discussed above. The description or tip to be displayed must then be added in the <code>title<\/code> attribute of the element.<\/p>\n\n\n\n<p>Below is a typical structure of adding a bootstrap tooltip to an HTML element :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;h2\n class=&quot;text-primary&quot;\n data-bs-toggle=&quot;tooltip&quot;\n title=&quot;Greetings from Bay-Bot \ud83e\udd16&quot;\n&gt;\n Hello \ud83d\udc4b\ud83d\ude03\n&lt;\/h2&gt;\n<\/pre><\/div>\n\n\n<p>The above markup will display &#8220;Greetings from Bay-Bot \ud83e\udd16&#8221; when you hover, focus, or click on it as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670588063197\/NnLSJ-TRZ.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h2 id=\"rtoc-7\"  class=\"wp-block-heading\">Customizing Bootstrap Tooltip<\/h2>\n\n\n\n<p>The bootstrap Tooltip at its core is designed with CSS3, and we can customize any of its elements by targeting its identifiers such as class and id names and using the right <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/unclebigbay143\/status\/1421862025555234821\">CSS specificity<\/a>.<\/p>\n\n\n\n<p>In the following sections, we&#8217;ll go over how to change the background color of a bootstrap tooltip and the color of its pointer tail. You can also make use of CSS fade transition to <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.2\/components\/tooltips\/#options\">add transition effects to bootstrap tooltips<\/a>.<\/p>\n\n\n\n<h3 id=\"rtoc-8\"  class=\"wp-block-heading\">Changing Bootstrap Tooltip Background Color<\/h3>\n\n\n\n<p>Target the <code>.tooltip-inner<\/code> classes to change the background color of the bootstrap tooltip using CSS as follows:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n.tooltip-inner {\nbackground-color: white;\ncolor: black;\n}\n<\/pre><\/div>\n\n\n<p>The above CSS style will give the tooltip a background color of white and a color black to make the text within it visible as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670589522319\/F7NkH4tTH.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>However, the tooltip arrow or tail is still having the default black color, we&#8217;ll address this in the next section.<\/p>\n\n\n\n<h3 id=\"rtoc-9\"  class=\"wp-block-heading\">Changing Bootstrap Tooltip Arrow Tail<\/h3>\n\n\n\n<p>The tooltip arrow is the pointer tail that points toward the element that is paired to the tooltip. We can also modify the color of the arrow by targeting the <code>.tooltip-arrow<\/code> class property with higher specificity as shown below:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n.bs-tooltip-top .tooltip-arrow::before,\n.bs-tooltip-auto&#091;data-popper-placement^=&quot;top&quot;] .tooltip-arrow::before {\nborder-top-color: white;\n}\n<\/pre><\/div>\n\n\n<p>The code above will make the tooltip arrow have a border color of white to produce the following output:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670589477238\/nKhBiervV.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 id=\"rtoc-10\"  class=\"wp-block-heading\">Adding Tooltips to Disabled Elements<\/h2>\n\n\n\n<p>Meanwhile, adding tooltips to disabled elements is tricky as they&#8217;re not clickable, cannot be focused, and do not react to the hover effect to trigger the tooltip to appear.<\/p>\n\n\n\n<p>Below is a disabled button with a bootstrap tooltip:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;button\n    disabled\n    class=&quot;btn btn-success btn-sm sm-&quot;\n    data-bs-toggle=&quot;tooltip&quot;\n    title=&quot;Fill in your card \ud83d\udcb3 to make payment.&quot;\n&gt;\n    Proceed to make payment \ud83d\udcb0\n&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p>The disabled button will not trigger the tooltip as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670600134718\/gOmvb1awQ.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p>The workaround to adding tooltips to a disabled element is to use a wrapper element such as a <code>div<\/code> , <code>section<\/code> or <code>span<\/code> tag and then apply the <code>data-bs-toggle<\/code> to the parent tag as follows:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;div \n    data-bs-toggle=&quot;tooltip&quot; \n    title=&quot;Fill in your card \ud83d\udcb3 to make payment.&quot;\n&gt;\n    &lt;button disabled class=&quot;btn btn-success btn-sm&quot;&gt;\n    Proceed to make payment \ud83d\udcb0\n    &lt;\/button&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>The wrapper tag will serve as the element&#8217;s tooltip and displays the tooltip when the disabled element is been hovered or clicked as demonstrated below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670601146503\/3RgfhVdUy.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h2 id=\"rtoc-11\"  class=\"wp-block-heading\">Adding Tooltips to an Anchor Tag &#8211; Links<\/h2>\n\n\n\n<p>You can also add tooltips to anchor tags as follows:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;p&gt;\n    Click\n    &lt;a\n    href=&quot;#d&quot;\n    data-bs-toggle=&quot;tooltip&quot;\n    title=&quot;You'll be redirected to your dashboard.&quot;\n    &gt;here&lt;\/a\n    &gt;\n    if page does not reload in 5 seconds.....\n&lt;\/p&gt;\n<\/pre><\/div>\n\n\n<p>The above code will produce the output below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670604675989\/Lmieep55V.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 id=\"rtoc-12\"  class=\"wp-block-heading\">Bootstrap Tooltip Positioning<\/h2>\n\n\n\n<p>By default, the bootstrap Tooltips are placed at the top of their paired element and we can modify this via data attributes, by setting the <code>data-bs-placement<\/code> attribute (previously <code>data-placement<\/code>) to either <code>top<\/code>, <code>right<\/code>, <code>left<\/code>, <code>center<\/code>, or <code>bottom<\/code> to change their position to the corresponding placement.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>NOTE: The tooltip will be position at the <strong>top <\/strong>if there&#8217;s no enough space to place it at the <strong>right\/left\/bottom<\/strong> of the screen.<\/p>\n<\/blockquote>\n\n\n\n<p>The following sections will demonstrate how to position bootstrap Tooltips at the top, right, left, center and bottom.<\/p>\n\n\n\n<h3 id=\"rtoc-13\"  class=\"wp-block-heading\">Tooltip Position Top<\/h3>\n\n\n\n<p>So this is the default position of bootstrap Tooltips, you can position a tooltip at the top of its paired element by setting the <code>data-bs-placement<\/code> to <code>\"true\"<\/code> as shown below:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;button\n    data-bs-placement=&quot;top&quot;\n    data-bs-toggle=&quot;tooltip&quot;\n    title=&quot;You need to be at least 18 years old \ud83d\udc68\ud83c\udffe to vote.&quot;\n    class=&quot;btn btn-info btn-sm&quot;\n&gt;\n    Click to vote \ud83d\uddf3\n&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p>This will make the Tooltip element to be displayed at the TOP of the element as follow:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670602419216\/swuSQQAql.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 id=\"rtoc-14\"  class=\"wp-block-heading\">Tooltip Position Right<\/h3>\n\n\n\n<p>Set the <code>data-bs-placement<\/code> to <code>\"right\"<\/code> to place the Tooltip to the right position of their paired element as follows:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;button\n    data-bs-placement=&quot;right&quot;\n    data-bs-toggle=&quot;tooltip&quot;\n    title=&quot;You need to be at least 18 years old \ud83d\udc68\ud83c\udffe to vote.&quot;\n    class=&quot;btn btn-info btn-sm&quot;\n&gt;\n    Click to vote \ud83d\uddf3\n&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p>This will make the Tooltip element to be displayed at the RIGHT of the element as follow:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670603085426\/n7R3Enw2p.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 id=\"rtoc-15\"  class=\"wp-block-heading\">Tooltip Position Left<\/h3>\n\n\n\n<p>Set the <code>data-bs-placement<\/code> to <code>\"left\"<\/code> to place the Tooltip to the left position of their paired element as follows:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;button\n    data-bs-placement=&quot;left&quot;\n    data-bs-toggle=&quot;tooltip&quot;\n    title=&quot;You need to be at least 18 years old \ud83d\udc68\ud83c\udffe to vote.&quot;\n    class=&quot;btn btn-info btn-sm&quot;\n&gt;\n    Click to vote \ud83d\uddf3\n&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p>This will make the Tooltip element to be displayed at the <strong>LEFT<\/strong> of the element as follow:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670603342922\/wBYgXxVS2.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 id=\"rtoc-16\"  class=\"wp-block-heading\">Tooltip Position Bottom<\/h3>\n\n\n\n<p>Set the <code>data-bs-placement<\/code> to <code>\"bottom\"<\/code> to place the Tooltip at the bottom of their paired element as follows:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;button\n    data-bs-placement=&quot;bottom&quot;\n    data-bs-toggle=&quot;tooltip&quot;\n    title=&quot;You need to be at least 18 years old \ud83d\udc68\ud83c\udffe to vote.&quot;\n    class=&quot;btn btn-info btn-sm&quot;\n&gt;\n    Click to vote \ud83d\uddf3\n&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p>This will make the Tooltip element to be displayed at the <strong>BOTTOM<\/strong> of the element as follow:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670603903414\/MjAWzYsCx.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 id=\"rtoc-17\"  class=\"wp-block-heading\">Tooltip Invalid Position<\/h3>\n\n\n\n<p>When the <code>data-bs-placement<\/code> is set to an unsupported value or placement value such as <code>\"center\"<\/code> the tooltip will be positioned at the top-left of the page as follows:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;button\n    data-bs-placement=&quot;center&quot;\n    data-bs-toggle=&quot;tooltip&quot;\n    title=&quot;You need to be at least 18 years old \ud83d\udc68\ud83c\udffe to vote.&quot;\n    class=&quot;btn btn-info btn-sm&quot;\n&gt;\n    Click to vote \ud83d\uddf3\n&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p>In this case the unsupported placement value will make the Tooltip element be displayed at the <strong>TOP-RIGHT<\/strong> of the page as follow:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1670603786116\/iP83VxwA_.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 id=\"rtoc-18\"  class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In this article, we learned how to add a tooltip to an HTML element using bootstrap tooltips. We also learned how to customize tooltips and make them appear in different positions.<\/p>\n\n\n\n<p>If you enjoy watching videos, you can also watch the Bootstrap Tooltip video tutorial below.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Bootstrap 5 Crash Course Tutorial #15 - Tooltips\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/WTrW-1JsDYE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Finally, more articles like this can be found on our <a href=\"https:\/\/www.copycat.dev\/blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">CopyCat blog<\/a>. CopyCat converts your Figma files into a ready-to-use React project, undeniably saving you over 35% of development time. You can check out CopyCat <a href=\"https:\/\/www.copycat.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-2 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/www.copycat.dev\/\" style=\"background-color:#7b3beb\">Convert Figma to React with CopyCat<\/a><\/div>\n<\/div>\n\n\n\n<h3 id=\"rtoc-19\"  class=\"wp-block-heading\"><strong>Interesting Reads From Our Blogs<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.copycat.dev\/blog\/material-ui-textfield\/\"><strong>A Great Guide To Using Material UI Textfield Efficiently<\/strong><\/a><\/li>\n\n\n\n<li><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.copycat.dev\/blog\/material-ui-grid\/\"><strong>Material UI Grid: The Ultimate Guide to Building Responsive Web Layout in React<\/strong><\/a><\/li>\n\n\n\n<li><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.copycat.dev\/blog\/material-ui-button\/\"><strong>Complete Guide to Using Material UI Button in React<\/strong><\/a><\/li>\n<\/ul>\n\n\n\n<p>Happy Coding \ud83d\udc68\ud83c\udffd\u200d\ud83d\udcbb<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to be more efficient? Consider CopyCat, an AI-powered plugin that will convert your Figma design to UI code, allowing you to concentrate on the app&#8217;s business logic. Table of Contents IntroductionWhat is a Bootstrap Tooltip?Bootstrap Popover vs Tooltip?Setting Up BootstrapHow to Enable Tooltip in Bootstrap 5How to make a Hover Tooltip in [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":2865,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[239],"tags":[122,214,252,27,30],"class_list":["post-2768","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","tag-bootstrap","tag-bootstrap-guide","tag-bootstrap-tooltip","tag-react","tag-react-js"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use Bootstrap Tooltip Efficiently - CopyCat Blog<\/title>\n<meta name=\"description\" content=\"This article will show you how to use the Bootstrap tooltip classes to add tooltips to HTML elements such as buttons, links, text, and input.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.copycat.dev\/blog\/bootstrap-tooltip\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Bootstrap Tooltip Efficiently - CopyCat Blog\" \/>\n<meta property=\"og:description\" content=\"This article will show you how to use the Bootstrap tooltip classes to add tooltips to HTML elements such as buttons, links, text, and input.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.copycat.dev\/blog\/bootstrap-tooltip\/\" \/>\n<meta property=\"og:site_name\" content=\"CopyCat Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-23T06:31:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-23T05:02:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/12\/Bootstrap-Tooltip.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Uncle Big Bay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Uncle Big Bay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Bootstrap Tooltip Efficiently - CopyCat Blog","description":"This article will show you how to use the Bootstrap tooltip classes to add tooltips to HTML elements such as buttons, links, text, and input.","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:\/\/www.copycat.dev\/blog\/bootstrap-tooltip\/","og_locale":"en_US","og_type":"article","og_title":"How to use Bootstrap Tooltip Efficiently - CopyCat Blog","og_description":"This article will show you how to use the Bootstrap tooltip classes to add tooltips to HTML elements such as buttons, links, text, and input.","og_url":"https:\/\/www.copycat.dev\/blog\/bootstrap-tooltip\/","og_site_name":"CopyCat Blog","article_published_time":"2022-12-23T06:31:50+00:00","article_modified_time":"2023-03-23T05:02:29+00:00","og_image":[{"width":2240,"height":1260,"url":"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/12\/Bootstrap-Tooltip.png","type":"image\/png"}],"author":"Uncle Big Bay","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Uncle Big Bay","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.copycat.dev\/blog\/bootstrap-tooltip\/","url":"https:\/\/www.copycat.dev\/blog\/bootstrap-tooltip\/","name":"How to use Bootstrap Tooltip Efficiently - CopyCat Blog","isPartOf":{"@id":"https:\/\/www.copycat.dev\/blog\/#website"},"datePublished":"2022-12-23T06:31:50+00:00","dateModified":"2023-03-23T05:02:29+00:00","author":{"@id":"https:\/\/www.copycat.dev\/blog\/#\/schema\/person\/9b6ba3105946a0869f4e3a8c9f4504fe"},"description":"This article will show you how to use the Bootstrap tooltip classes to add tooltips to HTML elements such as buttons, links, text, and input.","breadcrumb":{"@id":"https:\/\/www.copycat.dev\/blog\/bootstrap-tooltip\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.copycat.dev\/blog\/bootstrap-tooltip\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.copycat.dev\/blog\/bootstrap-tooltip\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.copycat.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use Bootstrap Tooltip Efficiently"}]},{"@type":"WebSite","@id":"https:\/\/www.copycat.dev\/blog\/#website","url":"https:\/\/www.copycat.dev\/blog\/","name":"CopyCat Blog","description":"Perfect the art of copying code","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.copycat.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.copycat.dev\/blog\/#\/schema\/person\/9b6ba3105946a0869f4e3a8c9f4504fe","name":"Uncle Big Bay","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copycat.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/08\/ubb-96x96.jpeg","contentUrl":"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/08\/ubb-96x96.jpeg","caption":"Uncle Big Bay"},"url":"https:\/\/www.copycat.dev\/blog\/author\/uncle-big-bay\/"}]}},"jetpack_featured_media_url":"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/12\/Bootstrap-Tooltip.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/posts\/2768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/comments?post=2768"}],"version-history":[{"count":9,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/posts\/2768\/revisions"}],"predecessor-version":[{"id":3868,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/posts\/2768\/revisions\/3868"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/media\/2865"}],"wp:attachment":[{"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/media?parent=2768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/categories?post=2768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/tags?post=2768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}