Wie (Tooltip) mit verschiedenen Optionen je nach Bildschirmgröße (neu) initialisieren?

Question

So verwende ich die Tooltipster.js-Bibliothek für Tooltips und versuchen, den Standardabstand der QuickInfo auf verschiedenen Bildschirmgrößen zu ändern.

Also hier ist, wie der Standard-Init sieht:

$(inputTooltipTrigger).tooltipster({ 
    distance: 24, 
    theme: 'test', 
    trigger: 'custom' 
    }); 

Wenn die Fensterbreite größer als 641px ist, dann die Abstandsänderungen zu 6

if ($(window).width() > 641){ 
    $(inputTooltipTrigger).tooltipster({ 
     distance: 6, 
     theme: 'test', 
     trigger: 'custom' 
    }); 
    } 

Wenn die Fenstergröße verändert wird, und dann ist größer als 641px, dann ändert sich der Abstand zu 6

$(window).resize(function(){ 
    if ($(window).width() > 641){ 
     $(inputTooltipTrigger).tooltipster({ 
     distance: 6, 
     theme: 'test', 
     trigger: 'custom' 
     }); 
    } 
    }); 

Wie bekomme ich das Plugin t o Reinitialisierung bei der Größenanpassung und wenn die Fensterbreite größer als 641px ist? Ich habe versucht, CSS zu verwenden, aber ich würde das !important Flag verwenden müssen, um die Inline-JS zu überschreiben, die vom Tooltip-Plugin generiert wird, was verpönt ist.

Answer 1

Ich würde versuchen, sie alle als eine jQuery-Funktion zu schreiben:

jQuery(function($){ 
    if ($(window).width() >= 641){ 
     $(inputTooltipTrigger).tooltipster({ 
      distance: 6, 
      theme: 'test', 
      trigger: 'custom' 
     }); 
    } 
    $(window).resize(function() { 
     if ($(window).width() >= 641) { 
      $(inputTooltipTrigger).tooltipster({ 
       distance: 6, 
       theme: 'test', 
       trigger: 'custom' 
      }); 
     } 
    }); 
}); 

Answer 2

Verwenden Sie die destroymethod zuerst, dann neu initialisieren den Tooltip:

$(window).resize(function() { 

    if ($(this).width() > 641) { 

     $(inputTooltipTrigger).tooltipster('destroy'); // no callback method, so try a setTimeout to re-initialize 

     setTimeout(function() { 
      $(inputTooltipTrigger).tooltipster({ 
       distance: 6, 
       theme: 'test', 
       trigger: 'custom' 
      }); 
     }, 250); 

    } 
});