{"id":8954,"date":"2015-12-15T16:12:32","date_gmt":"2015-12-15T14:12:32","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=8954"},"modified":"2018-01-08T13:26:11","modified_gmt":"2018-01-08T11:26:11","slug":"bootstrap-tooltip-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/","title":{"rendered":"Bootstrap Tooltip Example"},"content":{"rendered":"

In this example we’re going through Bootstrap tooltips<\/strong>. The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear\u2014a small “hover box” with information about the item being hovered over. <\/p>\n

In other words, a tooltip is a message which appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface. Tooltips do not usually appear on mobile operating systems, because there is no cursor. Bootstrap has quite good support of tooltips and makes them available to everyone to use such styled and animated elements.
\n 
\n[ulp id=’57DHuNTHJ2qczaGz’]<\/p>\n

1. Project Setup<\/h2>\n

The following requirements need to be met in order to continue adding tooltips with Bootstrap.<\/p>\n

1.1 Project Folder Setup<\/h3>\n

Create a new HTML file, which will be your main one, and make sure you have the following folder structure after downloading Boostrap.<\/p>\n

\"tooltip-1\"<\/a><\/p>\n

1.2 Main HTML Setup<\/h3>\n

Bootstrap already provides a base HTML, which contains links and references to all its’ libraries, including a CDN version of jQuery. Your main HTML file should have the following basic syntax inside:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <title>Bootstrap Tooltip Example<\/title>\r\n\r\n    <!-- Bootstrap -->\r\n    <link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n  <\/head>\r\n  <body>\r\n\r\n    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->\r\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\r\n    <!-- Include all compiled plugins (below), or include individual files as needed -->\r\n    <script src=\"js\/bootstrap.min.js\"><\/script>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
2. Usage & Examples<\/h2>\n
In order to use a tooltip in HTML, it must be initialized in Javascript. For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself. One way to initialize all tooltips on a page would be to select them by their data-toggle<\/code> attribute:<\/p>\n
\r\n$(function () {\r\n  $('[data-toggle=\"tooltip\"]').tooltip()\r\n})\r\n<\/pre>\n
In general, the tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. A more general way to initialize tooltips is the following:<\/p>\n
$('#example').tooltip(options)<\/code><\/p>\n
2.1 Tooltips on Links<\/h3>\n
Wouldn’t it be great to have some extra information for bits of text (words) or links? This is how you do it in a link:<\/p>\n
<a href=\"#\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"Link Tooltip\">Link<\/a><\/pre>\n
In a more real-world scenario, where a paragraph could have tooltips, we’d have for example:<\/p>\n
\r\n<div class=\"myText\">\r\n    <p>Oat cake jelly beans cake ice cream biscuit.\r\n    <a href=\"#\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"Here's a Candy Tooltip\">Candy<\/a>\r\n    sesame snaps caramels pudding macaroon marshmallow apple pie cake topping. Halvah\r\n    <a href=\"#\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"Whoa! A Croissant Tooltip\">croissant<\/a>\r\n    bonbon jelly. Bonbon pastry jelly. Fruitcake lemon drops gummi bears cookie jelly lollipop apple pie chupa chups pastry. Caramels dessert muffin. Chupa chups\r\n    <a href=\"#\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"Another Sweet Tooltip\">sweet<\/a>\r\n    cotton candy sweet roll candy icing liquorice pudding. Gummies candy canes oat cake pastry.<\/p>\r\n    <\/div>\r\n<\/pre>\n
Don’t forget to initialize the tooltip like we did in the section above, otherwise no tooltip will appear.<\/p>\n
\"tooltip-2\"<\/a><\/p>\n
2.2 Tooltips on Buttons<\/h3>\n
Not only can we also set tooltips on buttons, but also place them in a different direction, rather than the random top position. We can do so using the data-placement<\/code> attribute inline along with the other tooltip attributes, like so:<\/p>\n
\r\n<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"Tooltip on left\">Tooltip on left<\/button>\r\n<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Tooltip on top\">Tooltip on top<\/button>\r\n<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"Tooltip on bottom\">Tooltip on bottom<\/button>\r\n<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" data-placement=\"right\" title=\"Tooltip on right\">Tooltip on right<\/button>\r\n<\/pre>\n
Now you’d see tooltips on all sides of a button:<\/p>\n
\"tooltip-3\"<\/a><\/p>\n
3. Options<\/h2>\n
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-*<\/code>.<\/p>\n
3.1 animation<\/h3>\n
Type<\/strong>: boolean
\nDefault<\/strong>: true
\nDescription<\/strong>: Apply a CSS fade transition to the tooltip<\/p>\n
3.2 container<\/h3>\n
Type<\/strong>: string
\nDefault<\/strong>: false
\nDescription<\/strong>: Appends the tooltip to a specific element. Example: container: 'body'<\/code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element – which will prevent the tooltip from floating away from the triggering element during a window resize.<\/p>\n
3.3 delay<\/h3>\n
Type<\/strong>: number\/object
\nDefault<\/strong>: 0
\nDescription<\/strong>: Delay showing and hiding the tooltip (ms) – does not apply to manual trigger type. If a number is supplied, delay is applied to both hide\/show. Object structure is: delay: { \"show\": 500, \"hide\": 100 }<\/code><\/p>\n
3.4 html<\/h3>\n
Type<\/strong>: boolean
\nDefault<\/strong>: false
\nDescription<\/strong>: Insert HTML into the tooltip. If false, jQuery’s text method will be used to insert content into the DOM. Use text if you’re worried about XSS attacks.<\/p>\n
3.5 placement<\/h3>\n
Type<\/strong>: string\/function
\nDefault<\/strong>: “top”
\nDescription<\/strong>: How to position the tooltip – top | bottom | left | right | auto.
\nWhen “auto” is specified, it will dynamically reorient the tooltip. For example, if placement is “auto left”, the tooltip will display to the left when possible, otherwise it will display right.<\/p>\n
3.5 selector<\/h3>\n
Type<\/strong>: string
\nDefault<\/strong>: false
\nDescription<\/strong>: If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See this and an informative example.<\/p>\n
3.7 title<\/h3>\n
Type<\/strong>: string\/function
\nDefault<\/strong>: ”
\nDescription<\/strong>: Default title value if title<\/code> attribute isn’t present. If a function is given, it will be called with its this reference set to the element that the tooltip is attached to.<\/p>\n
3.8 trigger<\/h3>\n
Type<\/strong>: string
\nDefault<\/strong>: ‘hover focus’
\nDescription<\/strong>: How tooltip is triggered – click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual<\/code> cannot be combined with any other trigger.<\/p>\n
4. Methods<\/h2>\n
Additionally, you can add methods to the tooltip in javascript.<\/p>\n
4.1 .tooltip(‘show’)<\/strong><\/h3>\n
Reveals an element’s tooltip. Returns to the caller before the tooltip has actually been shown<\/strong> (i.e. before the shown.bs.tooltip<\/code> event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.<\/p>\n
$('#element').tooltip('show')<\/pre>\n
4.2 .tooltip(‘hide’)<\/strong><\/h3>\n
Hides an element’s tooltip. Returns to the caller before the tooltip has actually been hidden<\/strong> (i.e. before the hidden.bs.tooltip<\/code> event occurs). This is considered a “manual” triggering of the tooltip.<\/p>\n
$('#element').tooltip('hide')<\/pre>\n
4.3 .tooltip(‘toggle’)<\/strong><\/h3>\n
Toggles an element’s tooltip. Returns to the caller before the tooltip has actually been shown or hidden<\/code> (i.e. before the shown.bs.tooltip<\/code> or hidden.bs.tooltip<\/code> event occurs). This is considered a “manual” triggering of the tooltip.<\/p>\n
$('#element').tooltip('toggle')<\/pre>\n
4.4 .tooltip(‘destroy’)<\/strong><\/h3>\n
Hides and destroys an element’s tooltip. Tooltips that use delegation (which are created using the selector<\/code> option) cannot be individually destroyed on descendant trigger elements.<\/p>\n
$('#element').tooltip('destroy')<\/pre>\n
5. Events<\/h2>\n
The following events can be considered using with the tooltip:<\/p>\n
1. show.bs.tooltip<\/code> – This event fires immediately when the show<\/code> instance method is called.<\/p>\n
2. shown.bs.tooltip<\/code> – This event is fired when the tooltip has been made visible to the user.<\/p>\n
3. hide.bs.tooltip<\/code> – This event is fired immediately when the hide<\/code> instance method has been called.<\/p>\n
4. hidden.bs.tooltip<\/code> – This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).<\/p>\n
5. inserted.bs.tooltip<\/code> – This event is fired after the show.bs.tooltip<\/code> event when the tooltip template has been added to the DOM.<\/p>\n
For example:<\/p>\n
\r\n$('#myOwnTooltip').on('inserted.bs.tooltip', function () {\r\n  \/\/ do something\u2026\r\n})\r\n<\/pre>\n
6. Conclusion<\/h2>\n
To conclude, tooltips are a simple and nice way to add extra information to a link, button etc. Inspired by the excellent jQuery.tipsy plugin, tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage. Tooltips with zero-length titles are never displayed.<\/p>\n
7. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: Bootstrap Tooltip<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
In this example we’re going through Bootstrap tooltips. The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear\u2014a small “hover box” with information about …<\/p>\n","protected":false},"author":75,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[],"class_list":["post-8954","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap"],"yoast_head":"\nBootstrap Tooltip Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example we're going through Bootstrap tooltips. The tooltip or infotip or a hint is a common graphical user interface element. It is used in\" \/>\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.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Tooltip Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example we're going through Bootstrap tooltips. The tooltip or infotip or a hint is a common graphical user interface element. It is used in\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-15T14:12:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T11:26:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"Bootstrap Tooltip Example\",\"datePublished\":\"2015-12-15T14:12:32+00:00\",\"dateModified\":\"2018-01-08T11:26:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/\"},\"wordCount\":1020,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/\",\"name\":\"Bootstrap Tooltip Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"datePublished\":\"2015-12-15T14:12:32+00:00\",\"dateModified\":\"2018-01-08T11:26:11+00:00\",\"description\":\"In this example we're going through Bootstrap tooltips. The tooltip or infotip or a hint is a common graphical user interface element. It is used in\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bootstrap\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Bootstrap Tooltip Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Tooltip Example - Web Code Geeks - 2026","description":"In this example we're going through Bootstrap tooltips. The tooltip or infotip or a hint is a common graphical user interface element. It is used in","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.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Tooltip Example - Web Code Geeks - 2026","og_description":"In this example we're going through Bootstrap tooltips. The tooltip or infotip or a hint is a common graphical user interface element. It is used in","og_url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-12-15T14:12:32+00:00","article_modified_time":"2018-01-08T11:26:11+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"Bootstrap Tooltip Example","datePublished":"2015-12-15T14:12:32+00:00","dateModified":"2018-01-08T11:26:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/"},"wordCount":1020,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/","name":"Bootstrap Tooltip Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","datePublished":"2015-12-15T14:12:32+00:00","dateModified":"2018-01-08T11:26:11+00:00","description":"In this example we're going through Bootstrap tooltips. The tooltip or infotip or a hint is a common graphical user interface element. It is used in","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-tooltip-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"Bootstrap","item":"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/"},{"@type":"ListItem","position":4,"name":"Bootstrap Tooltip Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/8954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=8954"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/8954\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/8515"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=8954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=8954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=8954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}