Bootstrap 5.0.2 tooltip data-bs-delay attribute problem

user_10064905 0
Viewed 182

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 come 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.net/npm/bootstrap@5.0.2/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.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

twitter-bootstrap html javascript
1 Answers

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 :)

user_164995990
Related