6

I can't find any right way to renew timer in toastrjs after hovering. I determinate a extendedTimeOut to 0, to not close the toastr when I hover over it. The timeOut of toastr is 10000 ms, but when I'm finished hovering, toastr is immediately getting hide. What's the right way to show a toastr 10000 ms after I'm finished hovering over it.

Example of my toastr properties:

const inboxToastr = toastr;
inboxToastr.info(data.bubbleData, title, {
    "tapToDismiss": false,
    "closeButton": true,
    "newestOnTop": false,
    "progressBar": false,
    "positionClass": "toast-bottom-left", //position
    "preventDuplicates": false,
    "onclick": null,
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "10000",
    "extendedTimeOut": "0",
    "hideEasing": "linear",
    "iconClass": "background-gray"
});
Kartik Chauhan
  • 2,779
  • 5
  • 28
  • 39
Timur Misharin
  • 178
  • 8

1 Answers1

1

Using timeout 10000 and extendedTimeOut 10000 with other options to default seems to work as you expect, auto close after after 10 sec, keep shown while hovering and hide 10 sec after hovering out.

$(function() {
  toastr.info("Title", 'Subtitle', {
    timeOut: 10000,
    extendedTimeOut: 10000,
    progressBar: true
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
Vanojx1
  • 5,574
  • 2
  • 23
  • 37