CODEWITHSUNDEEP
javascripthtmlcssbootstrap-5jquery-ui-tooltip
Rohit Kumar
Rohit Kumar

Reputation: 15

Only simple tooltip is showing without any style

I don't know why when I hover over my a only a simple tooltip is showing with text.There is no style in it as shown in bootstrap documentation. (I'm creating a using js)

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/[email protected]/dist/css/bootstrap.min.css" 
    rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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);

Upvotes: 0

Views: 1020

Answers (1)

user1575941
user1575941

Reputation:

There is a lot wrong in your code block.

  1. Bootstrap JS in included twice. First time as the bundle, second as the stand-alone. Chose one or the other. See: https://getbootstrap.com/docs/5.0/getting-started/introduction/#js

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

  3. Your JS is, I assume, called after the tooltip initialisation, so it wont have the btn1 component in the DOM yet. So it is not initialised. For this to work you need to initialise the tooltip after the components are already in the DOM.

  4. The line btndiv.append(btn1); .. btndiv is not defined.

Better to just give you a working example (I assume you want to use jQuery): 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)
})

Upvotes: 1

Related Questions