What are the steps to reset a tooltip with varying options based on the size of the screen?

Currently, I am utilizing the tooltipster.js library to create tooltips and attempting to adjust the default distance of the tooltip based on various screen sizes.

Initially, the initialization appears as follows:

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

If the width of the window exceeds 641px, then the distance is modified to 6

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

Upon resizing the window to a width greater than 641px, the distance also changes to 6

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

I am seeking a solution for reinitializing the plugin when the window is resized and its width exceeds 641px. While I attempted using CSS, it required the !important flag to override the inline JS from the tooltip plugin, which is generally discouraged.

javascriptjquerycsstooltiptooltipster

Answer №1

To reset the tooltip, start by using the destroy function. Then, you can re-initialize it with the following code:

$(window).resize(function() {

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

        $(inputTooltipTrigger).tooltipster('destroy'); // If no callback method is available, use setTimeout to re-initialize

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

    }
});

Answer №2

To optimize the code, I recommend consolidating it into a single jQuery function:

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'
            });
        }
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a radial progress chart using Plotly JavaScript

I recently started working with the Plotly library and now I need to display a circular progress graph in Vuejs 2, like the one shown below. While Plotly is a comprehensive tool, I have not come across an example that matches this specific design using Ja ...

javascriptvue.jsplotlyplotly.js

Using the outer ng-repeat's object property to filter nested ng-repeat items

I'm currently working on nesting two ng-repeats with two separate JSON files. The goal is to filter the second ng-repeat based on parameters from the first ng-repeat. The first JSON file, $scope.matches, includes information about each match in the W ...

javascriptangularjsmean-stack

Counting records in a nested ng-repeat using AngularJS

As a newcomer to AngularJS, I am facing an issue with a nested ng-repeat using a custom filter. I want to display the record count of Orders being shown, but when applying a product filter, it does not work as expected. For instance, if an order has no pro ...

javascriptjqueryangularjsarraysjson

Empty MongoDB array persists even after POST request

After performing a POST request in Insomnia, my "games" array remains empty. What am I missing? UPDATE: New error after array.push({}) "errorValidationError: games.0.gameID: Path gameID is required., games.0.isGameActivated: Path isGameActivated is requi ...

javascriptarraysnode.jsmongodbmongoose

Tips for avoiding performance bottlenecks in Polymer 1

Environmental Issue Polymer 1 Challenge: I am facing an issue where I have an Array containing 35 objects. When I use a dom-repeat template to create a list of elements (all identical), it takes around 10 seconds for all the elements to render. The ent ...

javascripthtmldompolymerpolymer-1.0

Using JavaScript to link buttons and dynamically change their colors

Just starting to dabble in JavaScript and attempting to change the colors of my website's header, footer, and background. I've created two buttons: <div class="styleBut"> <a href="#" class="btn btn-warning">ReStyle</a> ...

javascriptjqueryhtmlcss

A step-by-step guide on implementing img source binding in Vue.js

<template> <div class="text-center"> <h1 class="display-4 my-5"><mark>GIGS</mark></h1> <b-container fluid="lg"> <b-row class="mx-auto"> <b-col lg="4" class=" ...

javascriptvue.jsbootstrap-4frontendbootstrap-vue

Guide to incorporating the content of a div into an image source using PHP

In extracting a value from an HTML table, I encountered this syntax: $('table#showalluporders tbody tr').click(function() { var tableData = $(this).closest("tr").children("td").map(function() { return $(this).text(); }).get(); $(' ...

phpjqueryhtmlcss

How to retrieve the content of <p> elements by their id or class in PHP

I am currently utilizing a Script that enables the display of URL content within the meta tag "description". This script utilizes PHP in the following manner: $tags = get_meta_tags($url); Subsequently, it is called like so: <label class="desc"> ...

phpjavascriptjqueryajaxget

What are the methods to alter validation for a Formfield based on the input from other Formfields?

My aim is to create a Form where input fields are required only if one or more of them are filled out. If none of the fields have been filled, then no field should be mandatory. I came across a suggestion on a website that recommended using "valueChanges" ...

javascriptangulartypescriptangular-reactive-formsangular-forms

Call a function of a javascript object from inside a callback function

In a user script, I have defined the MyClass and its methods as follows: function MyClass() { this.myCallback = function() { alert("MyClass.myCallback()"); }; this.startRequest = function() { GM_xmlhttpRequest({ &a ...

javascriptcallbackjavascript-objects

Transforming .POST into corresponding .AJAX techniques

I'm currently attempting to convert a .post javascript call into an equivalent .ajax call in order to make it asynchronous. However, I'm running into some issues and can't seem to get it to work. The original working .post call looks like th ...

javascriptjqueryajax

The property fails to reflect changes in state

I am currently developing an application that requires fetching data asynchronously and preserving the state in the parent component while also passing the data reference to children components. I encountered an issue where the props do not update when the ...

javascriptreactjsreact-propsreact-state-managementreact-state

PHP and JavaScript are two powerful programming languages that are

While I understand that PHP and JavaScript operate in different locations, I am curious to know if there is a way to incorporate some PHP code into my JavaScript file. I need to create unique URLs for linking to profiles and news posts, such as /#/news/IDH ...

javascriptphpjqueryangularjs

I'm curious, why does jQuery Ajax default to using a POST method for everything? After researching this, I still can't seem to pinpoint a definitive answer

$.post("submit-comments.php", { user: "Michael", comment: "This is a new comment" }, (data) => { console.log(data); } ); $.ajax({ url: "update-comments.php", method: "P ...

jqueryajaxrest

Substitute approach for Marionette driver action class

Previously, I had code to draw a rectangle in Selenium WebDriver which worked fine. However, after switching to Marionette driver, it stopped working because the Action class is not supported. I am looking for an alternative solution similar to using the R ...

javascriptjavaseleniumgeckofirefox-marionette

Attaching a JavaScript-infused text to innerHTML within a template

In a Windows 8 metro style app, I am working with a list of articles that are passed to a Flip View Control. Each article contains a description text in HTML which includes JavaScript. I understand the need to use the `MSApp.execUnsafeLocalFunction` functi ...

javascripthtmlwindows-8windows-runtime

Learn how to bring in images using props within React and incorporate the 'import' pathway

These are the props I am passing: const people=['Eliana','Stefania','Ahmed'] { people.map(function(name, index){ return <Person item={index} name={name}/>; }) } import Eliana from '../assets/imgs/people ...

javascriptreactjsecmascript-6jsx

Error encountered: syntax error, unexpected token while executing a basic AJAX request

Hello, I am new to AJAX and javascript, so please be patient with me. I am trying to pass a variable (document.getElementById('txtSearch').value) from my AJAX to PHP. Here is the code I attempted: $("#btnSearch").click(function() { ...

phpjqueryajaxparse-error

Access a file from a remote server and display its contents on a web browser. This code handles both text and HTML files, but does not support image files

I came across this small piece of code: var target = 'https://i.sstatic.net/5CXfX.png'; //An example, a .PNG image //Testing with text/html and text/plain and image/png res.setHeader( 'Content-Type', 'image/png' );//res repr ...

javascriptnode.jshttpgethttp-get