Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

toastrjs - renew timer after hovering

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"
});
like image 496
Timur Misharin Avatar asked Dec 03 '19 07:12

Timur Misharin


Video Answer


1 Answers

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" />
like image 76
Vanojx1 Avatar answered Nov 01 '22 23:11

Vanojx1