Tooltip Bootstrap timing

I am currently working on creating a navigation bar with icon-only buttons that display tooltips when touched or tapped. Here is the code I have implemented:

$('a[rel="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
});
<ul class="nav nav-tabs">
        <li class="active"><a id="Textcolor" data-toggle="tab" rel="tooltip" data-original-title='Home' href="#sectionA"><i id="homeicon" class="fa fa-lg fa-home"></i></a></li>
        <li><a id="Textcolor2" data-toggle="tab" rel="tooltip" data-original-title='Profile' href="#sectionB"><i id="profileicon" class="fa fa-lg fa-user"></i></a></li>
         <li><a id="Messages" data-toggle="tab" rel="tooltip" data-original-title='Messages' href="#"><i id="messageicon" class="fa fa-lg fa-envelope"></i></a></li>
         <li><a id="Notifications" data-toggle="tab" rel="tooltip" data-original-title='Notifications' href="#sectionA"><i id="bellicon" class="fa fa-lg fa-bell"></i></a></li>
         <li><a id="Gameification" data-toggle="tab" rel="tooltip" data-original-title='Gameification' href="#"><i id="gameicon" class="fa fa-lg fa-gamepad"></i></a></li>

While the tooltips are displaying correctly beneath each icon, I am looking for a way to make them disappear after 2 to 3 seconds when triggered by the rel="tooltip" attribute. Any suggestions on how to achieve this?

Thank you in advance.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Give this a shot:

Using jQuery

$('a[rel="tooltip"]').tooltip({
   animated: 'fade',
   placement: 'bottom',
   trigger: 'hover',
   delay: { "show": 200, "hide": 1000 }
});

While it may not be the perfect solution, I'm hoping it can offer some assistance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do I have to include the sizes attribute when using w-descriptors in srcset?

After reading several articles discussing the use of srcset for device-pixel-density adjustments and art direction, I have come to a few conclusions: The State of Responsive Images in 2015 by Paddi Macdonnell srcset Part 2: The W descriptor and sizes att ...

cssresponsive-designsrcsetresponsive-images

Nested ng-repeat for dynamic variable rendering

I am facing an issue where I have a nested ng-repeat directive. I am attempting to create a dynamic second ng-repeat, using a key from the first one, but the current syntax is not working. Is there a different way to achieve this? Perhaps a different nota ...

javascriptangularjsangularjs-ng-repeat

Exploring the world of Django and JSON POSTs in the realm of Google API mania

Project Overview I am currently developing an application aimed at assisting users in finding rides. My tech stack includes Django, Python 2.7, and integration with Google Maps and Directions APIs. Within a specific view, I present a map where users can ...

javascriptdjangojsonpostgoogle-directions-api

Using ES6 Babel with multiple package.json files

For a large project, I am looking to break it down into multiple package.json files. This way, the dependencies for each part can be clearly defined and exported as separate entities. However, my goal is to compile all of these packages using webpack and ...

javascriptnpmecmascript-6babeljs

When zooming out, Leaflet displays both tile layers

I'm currently working on integrating two tile layers along with a control for toggling between them. Below is the code snippet I am using: const layer1: L.TileLayer = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { ...

javascripttypescriptleaflet

If a span element is present, apply a specific class to the corresponding

I am working with a dynamic list of links retrieved through AJAX. After parsing the links and appending them to a div, I have encountered an issue where some 'a' elements are followed by a 'span' that needs to be considered. Here is th ...

javascriptjquery

Create a cookie in javascript

There seems to be an issue with this code snippet: function getCookie(c_name) { var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRc ...

javascript

Can a single value be stored in a table using a radio button?

I have created an HTML table that is dynamically generated from a database. I am using a for loop to populate the table. However, I am facing an issue where each radio button in the table holds only one value. What I actually want is for each row to have ...

javascripthtml

Is the indigo-pink color scheme fully implemented after installing @angular/material and scss using ng add command?

After running ng add @angular/material, we are prompted to choose a CSS framework and theme. I opted for indigo-pink and scss. Will the material components automatically inherit this theme, or do we need to take additional steps? When using normal CSS (wi ...

javascriptcssangulartypescriptangular-material

Can I use Javascript to access a span element by its class name?

Similar Question: How to Retrieve Element By Class in JavaScript? I am looking to extract the text content from a span element that does not have an ID but only a specific class. There will be only one span with this particular class. Can anyone guide ...

javascripthtml

The onclick functionality is not functioning properly within email communications

My JavaScript code contains an AJAX call within Datatables, and this snippet of code is causing an issue: { "data": null, "width": "10%", "render": function(data){ icon2 = '<center><button type="button" class="btn btn-info ...

javascriptajaxdatatable

The words spill across the navigation bar

I am facing an issue with my navbar where the text overflows and creates extra space due to a white background. I have tried resolving this for a while but haven't been successful. I need help from someone knowledgeable in this area. Here are some im ...

javascripthtmlbootstrap-5

Activate Jquery to display the submenu when clicked and conceal any other open submenus at the same time

I'm trying to create a responsive menu with menus and submenus using JQuery. However, as a newbie to JQuery, I'm struggling to hide a previous submenu when displaying another one. Here's the CodePen link Below is the HTML code: <nav cl ...

javascriptjqueryhtmlcss

JavaScript: The function is encountering issues with properly formatting the numbers

I am currently facing an issue with a function I have created to format numbers for currency by inserting commas every 4 digits. The problem lies in the fact that the first 4 numbers do not have a comma added where it should be, and the formatting only wor ...

javascript

Identify and click on the child span within the li element using Cypress

I am struggling to select a li element and click/check on the span with the checkbox class, but I can't seem to make it work. Here is what I have attempted: <div id="list-widget"> <ul class="tree"> <li class ...

javascriptreactjscypress

The transparency effect on the overlaying image gradually diminishes as the images transition in the jQuery slideshow on Internet

My slideshow smoothly transitions between images, with a logo positioned to partly overlay it. Everything looks great except for one pesky issue in IE6 - when the images change, the part of the logo that overlaps the slideshow also fades. I don't wan ...

jqueryslideshow

Pushing state history causes browser back and forward button failure

I'm currently utilizing jQuery to dynamically load content within a div container. On the server side, the code is set up to detect if the request is being made through AJAX or GET. In order to ensure that the browser's back and forward buttons ...

javascriptjquerybrowser-historypushstate

Strange glitch in the Trebuchet MS font

I am currently attempting to utilize the jquery.fullcalendar plugin with jQuery UI theming. Everything seems to be functioning properly, except for an issue where the user's selection of a time range (week or day view) is displaced by approximately on ...

jquerycssjquery-uijquery-pluginsfullcalendar

What are the distinctions between manually and programmatically changing URLs in Angular 6?

My query pertains to differentiating navigation methods, specifically between clicking a button with [routerLink] and manually entering a URL in the browser's search bar. Update: I have a fixed menu on a certain page that appears as follows: <ul& ...

javascriptangular

What is the best way to transform an array of objects into a nested array through shuffling

I am dealing with a diverse array of objects, each structured in a specific way: data = [ { content: { ..., depth: 1 }, subContent: [] }, { content: { ..., depth: 2 ...

javascriptarraystypescript