Problem with Bootstrap5 tooltips

Utilizing bootstrap 5 on my website, I encountered an issue with tooltips (taken from the official documentation website): https://getbootstrap.com/docs/5.1/components/tooltips/#examples

Despite extensive searching on Google and Stackoverflow, none of the suggested solutions seem to work for me. Here is the problem I am facing:

Instead of the desired outcome:

https://i.sstatic.net/8YQm2.png

I am getting this result:

https://i.sstatic.net/8AXgF.png

This is the HTML code snippet causing the issue:

<li class="ms-3"><a class="text-muted bi-geo-alt" href="https://goo.gl/maps"
                                        target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom"
                                        title="Testing"></a></li>

Here are the dependencies listed in my package.json:

 "dependencies": {
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.8.1"
},
"devDependencies": {
    "css-loader": "^6.7.1",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
},

In addition, I have imported the following into my index.js file:

import 'bootstrap/dist/css/bootstrap.min.css' // Bootstrap CSS
import 'bootstrap-icons/font/bootstrap-icons.css' // Bootstrap Icons
cssnode.jstooltipbootstrap-5

Answer №1

Let me present a potential resolution using a straightforward example outlined in the documentation https://getbootstrap.com/docs/5.2/components/tooltips/

Remember to initialize the tooltips.

!DOCTYPE html>     
<html>          
                
<head>              
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
                        
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3f332e391c6e726d6d726a">[email protected]</a>/dist/umd/popper.min.js"></script>
                        
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6865657e797e786b7a4a3f24382439">[email protected]</a>/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14767b7b60676066756454213a263a27">[email protected]</a>/dist/js/bootstrap.min.js"></script>
    <script>                    
        $(document).ready(function() {
            $('[data-bs-toggle="tooltip"]').tooltip({'delay': { show: 3000, hide: 0 }, 'placement': 'bottom'});
        });             
    </script>           
    <style>
    .custom-tooltip {
        --bs-tooltip-bg: gray;
    }
    </style>
</head>                 

<body>                          

<button type="button" class="btn btn-secondary" 
        data-bs-toggle="tooltip" 
        data-bs-html="true" 
        data-bs-custom-class="custom-tooltip"   
        data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>                       
                        
</body>             
</html>

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

BS grid malfunctioning in a non-uniform manner

When a division in the advantage grid is clicked, the card body of another division collapses. However, this does not occur in the disadvantage grid. Clicking on one section in the disadvantage grid does not collapse another section as it does in the advan ...

htmlcsstwitter-bootstrap-3frontendtwitter-bootstrap-4-beta

When using the npx command, the <package> runs successfully in the command line but does not function properly within the scripts section

After installing a package in Node with npm i mypackage --save-dev, everything runs smoothly through the command line using npx mypackage --options. However, when attempting to include it in the scripts section of package.json, it fails. Various attempts w ...

node.jsnpm

What steps should I take to resolve an unfamiliar npm run build error?

I am encountering an error while running "npm run build" for a project I created 4 months ago. Surprisingly, there were no errors at the time of creation. Now, when I try to rebuild my website, I receive the following error message: $ npm run build [ema ...

node.jsreactjsnpm

Leverage CSS styling for database values within a PHP framework

How can I style MYSQL database values in HTML using CSS? My vegetarian database row has 'Y' for yes and 'N' for no. I want to apply different styles to these values using CSS as I display them on my PHP-based page. if ($result1->num_ ...

phphtmlcssmysqldatabase

A lone slant positioned at the lower border of an object

Currently, I am working with two images stacked vertically. The dimensions of the top image are set at 100% width and 350px height, while the bottom image size is not a major concern. I am specifically interested in skewing the top image and maintaining a ...

htmlcss

Snap carousel for React Native

Currently tackling an issue with my react native expo app where I'm encountering the error: TypeError: Cannot read property 'array' of undefined, using the js engine Hermes. This problem seems to be connected to the Carousel package. I atte ...

node.jsreact-nativeexponode-modulespatch

What is the best way to retrieve an object value within an if statement?

What can I do to ensure that the line within the if statement functions properly? const player1 = { name: "Ashley", color: "purple", isTurn: true, play: function() { if (this.isTrue) { return `this["name"] is current ...

javascriptnode.js

What is causing the unexpected impact of the "Product Quick View" JavaScript plugin on divs that are not being activated by user interaction?

As a newcomer to web design, I have implemented the "Product-Quick-View" plugin from CodyHouse on my website. Upon clicking the DEMO button and inspecting the code, you will find the following: <body> <header> <h1>Product Q ...

javascripthtmlcssplugins

Your request was denied by the Google Maps API server due to an invalid request. Please include the 'size' parameter in your request

I need to incorporate a static Google Map into my application built on node.js. Here is the code snippet: .panel.panel-primary .panel-heading h2.panel-title On the map .panel-body img.img-responsive.img-rounded(src="http://maps.googl ...

javascriptnode.jsgoogle-mapsgoogle-maps-api-3

Styling the body element in Material UI: A guide to customizing the

I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', b ...

cssreactjsmaterial-uithemes

Encountered an unexpected token error while trying to dump response data with ElasticSearch/npm package elasticdump

After running an elastic dump command to dump the output, an unexpected token error occurred. I'm not sure what went wrong here. Do I need to specify a different data type? Can someone help me take a look at the response that is being parsed? ##>e ...

node.jselasticsearchnpm

"Enhance your audio experience across all browsers with the revolutionary

I am looking for a way to play an mp3 file endlessly when the user opens my website. I need a lightweight crossbrowser solution that works in all browsers, including IE. Any suggestions? ...

javascriptjqueryhtmlcssmp3

Tips on dividing a div into two separate pages when converting to PDF

I am working on an asp.net MVC project and I need to convert a HTML div into a PDF with two separate pages. Here is an example of my code: HTML Code <div class="row" id="mycanvas"> <p>This is the first part of my content.</p> <p ...

javascriptjqueryhtmlcss

I am running into a problem trying to configure the "timezone" setting for MySQL within Sequelize and Node.js

Currently, I am utilizing node and sequelize to develop a web API. So far, everything is functioning correctly. However, when attempting to update the user table with the following code: var localDate=getDateTime(); console.log(localDate) //output: 2021/06 ...

javascriptmysqlnode.jsdatetimesequelize.js

Node.js request body is not returning any data

UPDATE: @LawrenceCherone was able to solve the issue, it's (req, res, next) not (err, res, req) I'm in the process of building a MERN app (Mongo, Express, React, Node). I have some routes that are functioning well and fetching data from MongoDB. ...

javascriptnode.jsexpress

Using the class for jQuery validation as opposed to the name attribute

I am looking to implement form validation using the jquery validate plugin, but I am facing an issue with using the 'name' attribute in the html since it is also used by the server application. Specifically, I want to restrict the number of check ...

javascriptjqueryhtmlcssjquery-validate

Performing a conditional query on a Many-to-Many relationship in TypeORM

Operating under a many-to-many relationship between Category and Product entities In need of filtering products based on category ID Attempted to implement the following code after referring to some examples, but encountered difficulties in making it fun ...

javascriptnode.jstypescriptnestjstypeorm

The hyperlink in the HTML code is malfunctioning

While working on a Wix website, I encountered an issue with the code snippet below: // JavaScript var countries = [ { name: 'Thailand', link: 'www.google.com' }, { name: 'Tanzania', link: '' }, { name: &ap ...

javascripthtmlcss

Creating a Notification System with socket.io in node.js: A Comprehensive Guide to Architecture and Design with Real-Time Message Handling

Disclaimer I am not familiar with node.js I have no experience with socket.io I am interested in creating a notification system similar to Google Plus, Facebook, and StackOverflow. While I am confident in my abilities as a developer, I could use some gu ...

phpmysqlnode.jscometsocket.io

node.js and npm are experiencing issues with executing commands

After setting up a fresh instance of node.js using Plesk Onyx on CentOS 6, I encountered an issue. Although the command to check the version (/opt/plesk/node/7/bin/npm npm --version) runs successfully, I am unable to execute main commands like npm install ...

node.jslinuxsshnpmplesk