The tooltip being displayed is plain and lacks any design elements

When I hover over my a element, only a simple tooltip appears without any styling, unlike what is shown in the Bootstrap documentation. (I am creating the a element using JavaScript)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--BOOTSTRAP-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" 
    rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

    <!--GOOGLE FONTS-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">

    <!--CUSTOM STYLESHEET-->
    <link rel="stylesheet" href="../CSS/homePage.css">
    <title>App</title>
</head>

<body>

    <div class = "btndiv">
        <!--DIV FOR STORING ANCHOR TAG-->
    </div>

    <!--JQUERY-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!--BOOTSTRAP-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popperjs/dist/umd/popper.min.js"
        integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"
        integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
        crossorigin="anonymous"></script>
    
    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip({ 'placement': 'bottom' });
        });
    </script>

    <script src="../JAVASCRIPT/homePage.js"></script>

MY JS -

const btn1 = document.createElement('a');
btn1.innerHTML = 'DELETE';
btn1.setAttribute('data-bs-toggle', 'tooltip');
btn1.setAttribute('data-bs-placement', 'bottom');
btn1.setAttribute('title', 'Delete');
btn1.href = '#';
btndiv.append(btn1);
javascripthtmlcssbootstrap-5jquery-ui-tooltip

Answer №1

Your code block contains several issues that need to be addressed.

  1. Bootstrap JS is included twice in your code - once as the bundle and then again as standalone. You should choose either one. For more information, refer to: https://getbootstrap.com/docs/5.0/getting-started/introduction/#js

  2. The usage of 

    $('[data-toggle="tooltip"]').tooltip({ 'placement': 'bottom' });
    is for Bootstrap 4 and not for Bootstrap 5. Please check the correct method at: https://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere

  3. Your JavaScript code assumes the tooltip initialization is happening before it, so the component may not be present in the DOM yet. To resolve this, you need to ensure tooltip initialization occurs after components are loaded into the DOM.

  4. In the line btndiv.append(btn1);, the variable btndiv is not defined.

To provide a functional example (assuming jQuery is used), view this working demo: https://jsfiddle.net/vinorodrigues/rLjzys8k/2/

HTML:

    <div class = "btndiv">
        <!--DIV FOR STORING ANCHOR TAG-->
    </div>

JS:

const btn1 = document.createElement('a');
btn1.innerHTML = 'DELETE';
btn1.setAttribute('data-bs-toggle', 'tooltip');
btn1.setAttribute('data-bs-placement', 'bottom');
btn1.setAttribute('title', 'Delete');
btn1.href = '#';

const btndiv = $('.btndiv');
btndiv.append(btn1);

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

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

Are there any methods to achieve smoother font icons on Firefox?

When it comes to using icons on different browsers, I've noticed an issue. Icons appear sharp on Google Chrome and Opera, but when viewed on Firefox they tend to look blurry if the font-size is less than 20px. Strangely enough, once the font size reac ...

cssfirefoxfontsiconsfont-smoothing

Encountering a 404 error when trying to reload the page?

My React Router is functioning properly in the development environment. Here's what I implemented in Webpack Dev Server: historyApiFallback: { index: 'index.html', } Now, when transitioning to production mode, I wanted to replicate the ...

javascriptexpresswebpack

Parsing string to JSON object and extracting specific information

In my code, I have a variable named "response" that contains the following string: {"test": { "id": 179512, "name": "Test", "IconId": 606, "revisionDate": 139844341200, "Level": 20 }} My goal is to extract the value of the id key and store ...

javaandroidhtmljson

When the button is clicked, dynamically fetch data from a MySQL database using PHP without the need to refresh

I have a .php page where I am displaying a table from my MySQL database using PHP based on a cookie value. On this same page, I have implemented a feature that allows me to change the cookie data without having to reload the entire page by simply clicking ...

javascriptphpjquerymysqlajax

Download a complete website using PHP or HTML and save it for offline access

Is there a way to create a website with a textbox and save button, where entering a link saves the entire website like the 'save page' feature in Google Chrome? Can this be done using PHP or HTML? And is it possible to zip the site before downloa ...

phpjavascripthtmlwebdownload

Creating circular borders in CSS: A step-by-step guide

Is it possible to create a circular border in CSS? Currently, the shape is square but I would like it to be circular. color: white; left: 52px; position: absolute; top: 65px; padding: 3px; background-color: rgb(0, 195, 255); ...

htmlcss

Is there a way to automatically override the CSS cursor style?

Issue with SCSS styling on image link I attempted to modify the cursor style from pointer to default, but after saving and reloading my React app, the change did not take effect. I tried writing some code, but it seems that Stack Overflow is indicating an ...

javascripthtmlcssreactjssass

Transferring information to an outside document using Ajax

My code works perfectly when I use this: ajax.open("post","a.php",true); However, the problem arises when I attempt to send data to an external file like this: ajax.open("post","http://www.example.com/a.php",true); Unfortunately, it doesn't work i ...

javascriptajaxhttp-postexternalsend

Is it possible to scroll by using the dragenter event?

Looking for a way to achieve incremental scroll up and scroll down using jQuery without jQuery UI? Here's the scenario - I have two divs: <div class="upper" style="height:35px;background-color:red;right:0;left:0;top:0;position:fixed;width:100%;z-i ...

javascriptjquery

Node.js, PHP, and the Express framework

I have a project where I need to develop a to-do list and a form that allows users to upload png files using Node.js. Currently, I am using the following packages: { "name": "todo", "version": "0.0.1", "private": true, "dependencies": { "ejs": ...

javascriptphpnode.jsexpress

Is there a way to verify if a user taps outside a component in react-native?

I have implemented a custom select feature, but I am facing an issue with closing it when clicking outside the select or options. The "button" is essentially a TouchableOpacity, and upon clicking on it, the list of options appears. Currently, I can only cl ...

javascriptreactjstypescriptreact-native

Notes should be added to the Flutter page when it is executed on the emulator

I am working with 2 widgets in my project: ProjectPage and ProjectPageWeb, both of which have similar functionalities in displaying an iframe. The difference lies in the fact that they use different components to achieve this. ProjectPage utilizes the Web ...

htmlflutterdartiframewebview

What steps can be taken to provide accurate information in the absence of ImageData?

Utilizing a JS library to convert a raster image into a vector, I encountered an issue where the library returned a fill of solid color instead of the desired outcome. I suspect that the problem lies within the ArrayBuffer. The process of loading an imag ...

javascripthtmlcanvasarraybuffer

Phonegap application functioning smoothly on computer, encountering issues on mobile device

Hey there! I recently developed a phonegap app that retrieves JSON data from a YQL link and presents it to the user. It works perfectly on Google Chrome desktop, but my client mentioned that it doesn't work on his Android 2.3 device. Could you help me ...

javascriptandroidhtmlcordova

What is the correct way to generate a normal map using THREE.js?

Experimenting with the Normal map Ninja demo, I attempted to apply it to a cube in my scene using the most recent version of Three.js from the development branch: // Setting up common material parameters var ambient = 0x050505, diffuse = 0x331100, specul ...

javascriptshaderwebglthree.js

Steps to set up a MessageCollector on a direct message channel

Hey everyone, does anyone have any tips on setting up the message.channel.createMessageCollector function for a direct message? I attempted to use message.author.dmChannel.createMessageCollector but it didn't work for me. Any advice? ...

javascriptdiscorddiscord.js

Attempting to retrieve key-value pairs from a nested JSON array

I am attempting to extract values along with their corresponding key names from a nested JSON array resData =[ { _index: 'web', _type: 'event', _id: 'web+0+93', _score: null, _source: { 'os-nam ...

javascriptnode.jsarraysjson

Navigate through set of Mongoose information

I have a challenge where I need to retrieve an array of data from Mongoose, iterate through the array, and add an object to my Three.js scene for each item in the array. However, when I try to render the scene in the browser, I encounter an error that say ...

javascriptnode.jsexpress

Trouble with displaying class object array in Angular 5 using ngFor loop

I am attempting to loop through an array of class objects to populate a dropdown menu in Angular 5. However, the dropdown menu is not showing any options and there are no errors appearing in the browser console. The object array is created based on this m ...

javascriptarraysangularngfor

Unable to alter the pagination's selected page color to grey with material UI pagination components

Currently, I am implementing pagination using material UI. While I have successfully changed the page color to white, I am facing difficulty in changing the selected page color to grey. This issue arises because the background color is dark. import React, ...

javascriptreactjsreact-hooksmaterial-uipagination