javascript - Bootstrap 5.0.2 tooltip data-bs-delay attribute problem - Stack Overflow

admin管理员组

文章数量:1435534

Having problems with BS 5.0.2 tooltip show and hide delay. According to BS documentation it's possible to setup the show and hide delay in attribute as an object like below:

data-bs-delay:{show:2000, hide:1000}

or

data-bs-delay={show:2000, hide:1000}

But the tooltip is shown/hidden without any delay or the console shows "Uncaught TypeError: TOOLTIP: Option "delay" provided type "string" but expected type "(number|object)"."

While setting up only

data-bs-delay=2000

gives the delay but it's the same for show and hide.

So far I have tried all quotation marks variations in the attribute as suggested on the internet but to no joy. I have e across solutions for that but using jquery which is something I'm not interested ATM.

Is it possible to set up the different times for tooltip show and hide delay in the attributes?

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

#container {
  margin: 5em;
  width: 15em;
  cursor: pointer;
}

<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />

<div id="container" data-bs-toggle="tooltip" data-bs-placement="top"
    data-bs-html="true" data-bs-delay='{"show":2000, "hide":1000}' 
    title="Delayed tooltip.">Hover here to show a tooltip after 2 seconds and to hide it after 1 second</div>

<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Having problems with BS 5.0.2 tooltip show and hide delay. According to BS documentation it's possible to setup the show and hide delay in attribute as an object like below:

data-bs-delay:{show:2000, hide:1000}

or

data-bs-delay={show:2000, hide:1000}

But the tooltip is shown/hidden without any delay or the console shows "Uncaught TypeError: TOOLTIP: Option "delay" provided type "string" but expected type "(number|object)"."

While setting up only

data-bs-delay=2000

gives the delay but it's the same for show and hide.

So far I have tried all quotation marks variations in the attribute as suggested on the internet but to no joy. I have e across solutions for that but using jquery which is something I'm not interested ATM.

Is it possible to set up the different times for tooltip show and hide delay in the attributes?

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

#container {
  margin: 5em;
  width: 15em;
  cursor: pointer;
}

<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />

<div id="container" data-bs-toggle="tooltip" data-bs-placement="top"
    data-bs-html="true" data-bs-delay='{"show":2000, "hide":1000}' 
    title="Delayed tooltip.">Hover here to show a tooltip after 2 seconds and to hide it after 1 second</div>

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

• javascript
• html
• twitter-bootstrap

Share Improve this question Follow edited Jun 21, 2022 at 14:26 isherwood 61.2k1616 gold badges122122 silver badges170170 bronze badges asked Jun 21, 2022 at 5:47 Greg GreanskyGreg Greansky 8511 silver badge66 bronze badges 2

• 1 Well that's super annoying, now innit? I even tried updating the library to 5.1 (which you should do if you can--should be painless). No luck. – isherwood Commented Jun 21, 2022 at 14:24
• Related (but unhelpful): stackoverflow./questions/15170967/… – isherwood Commented Jun 21, 2022 at 14:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I'm yet to find a way to achieve this using the data-bs-delay attribute however have found a way to have a global delay for every tooltip (which I think works better) with the below code

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl,{delay: { "show": 500, "hide": 100 }});
})

The second argument for bootstrap.Tooltip(element,config) is a config object in which I would assume you could override any of the default values below (I've only tested the delay option)

const Default = {
  animation: true,
  template: '<div class="tooltip" role="tooltip">' +
              '<div class="tooltip-arrow"></div>' +
              '<div class="tooltip-inner"></div>' +
            '</div>',
  trigger: 'hover focus',
  title: '',
  delay: { "show": 500, "hide": 100 },
  html: false,
  selector: false,
  placement: 'top',
  offset: [0, 0],
  container: false,
  fallbackPlacements: ['top', 'right', 'bottom', 'left'],
  boundary: 'clippingParents',
  customClass: '',
  sanitize: true,
  sanitizeFn: null,
  allowList: DefaultAllowlist,
  popperConfig: null
}

I'm no JS expert however this little hack did the job for me :)

I just wanted to add a delay to a tooltip and came across this problem.

I have the simple index.html page below. When I double-click on the file and run it (with the url: file:///C:/.../test/index.html), the delay and the tooltip seem to work. However, when I access the file/folder from the localhost (with the url: http://localhost/test/), I get the following error.

Uncaught TypeError: TOOLTIP: Option "delay" provided type "string" but expected type "(number|object)".

I tried to debug the bootstrap.bundle.min.js file, and at the surface, there does not appear to be a problem. To manually inspect the file, I switched to bootstrap.bundle.js, and the problem went away. Now, both the file:///C:/.../test/index.html and http://localhost/test/ work.

I can't make sense of this. Why would the minified .js file not work when served via http/localhost? Well, I'm not that curious. Getting it to work was enough.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Blank HTML5 Page</title>
    <link rel="stylesheet" type="text/css" href="../assets/ext/bootstrap/bootstrap.min.css" />
</head>
<body class="p-4">

<span
    class="d-inline-block"
    tabindex="0"
    data-bs-toggle="tooltip"
    data-bs-title="Disabled tooltip"
    data-bs-delay='{"show":1000,"hide":200}'
    >
  <button class="btn btn-primary" type="button"> button</button>
</span>


<script src="../assets/ext/bootstrap/bootstrap.bundle.min.js"></script>

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

</body>
</html>

Note: Used Bootstrap v5.3.2

本文标签： javascriptBootstrap 502 tooltip databsdelay attribute problemStack Overflow