Bootstrap 3 Tutorial

Bootstrap 3 Tooltip

Last modified on: October 28, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="b3534c18-eb18-48aa-a3f1-6ebfbaabacde" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 3 Tooltip</h3>
<p>Bootstrap 3 Tooltips are small pop-up boxes that appear when a user hovers over or focuses on an element. They are useful for providing additional information or context about a specific item on your webpage without cluttering the design.</p>
<hr />
<h3>1. Basic Structure</h3>
<p>To create a tooltip, you need to add the <code>data-toggle="tooltip"</code> attribute to the element you want to provide additional information for. The tooltip text can be specified using the <code>title</code> attribute.</p>
<h4>Example of a Basic Tooltip</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!-- Include Bootstrap CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;

&lt;!-- Tooltip Element --&gt;
&lt;button type="button" class="btn btn-default" data-toggle="tooltip" title="This is a tooltip!"&gt;
    Hover over me
&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>2. Adding Tooltip Functionality</h3>
<p>To activate the tooltips, you must include jQuery and Bootstrap's JavaScript in your HTML. Additionally, you'll need to initialize the tooltip using JavaScript.</p>
<h4>Example of Including Dependencies and Initializing Tooltip</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;!-- Include Bootstrap JS --&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;script&gt;
$(document).ready(function(){
    // Initialize tooltips
    $('[data-toggle="tooltip"]').tooltip(); 
});
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>3. Customizing the Tooltip</h3>
<p>You can customize the tooltip's appearance and behavior using various options, such as placement and animation.</p>
<h4>Example of Custom Tooltip Placement</h4>
<p>You can specify where the tooltip appears relative to the element using the <code>data-placement</code> attribute. Options include <code>top</code>, <code>bottom</code>, <code>left</code>, and <code>right</code>.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;button type="button" class="btn btn-default" data-toggle="tooltip" title="Tooltip on the right" data-placement="right"&gt;
    Tooltip on right
&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>4. Tooltip with HTML Content</h3>
<p>If you want to include HTML content in the tooltip, you can use the <code>data-html</code> attribute set to <code>true</code>. However, be cautious as this may introduce security risks if the content comes from user input.</p>
<h4>Example of HTML Tooltip</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;button type="button" class="btn btn-default" data-toggle="tooltip" data-html="true" title="&lt;strong&gt;This is bold!&lt;/strong&gt;"&gt;
    Tooltip with HTML
&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>5. Triggering Tooltips</h3>
<p>You can customize when the tooltip appears by using the <code>data-trigger</code> attribute. Options include <code>hover</code>, <code>focus</code>, <code>click</code>, and <code>manual</code>.</p>
<h4>Example of Click Trigger Tooltip</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;button type="button" class="btn btn-default" data-toggle="tooltip" title="Clicked tooltip!" data-trigger="click"&gt;
    Click me for tooltip
&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>Bootstrap 3 Tooltips are a simple yet effective way to enhance your website's interactivity. They provide helpful context and information without cluttering the interface, improving the overall user experience. By utilizing various options and customizations, you can tailor tooltips to fit your design needs.</p>

Web Technology View More