[Resolved] Tooltip does not load properly after Ajax filters used in view

[Author]

Posts

[CharleneD1435]

Tell us what you are trying to do?
I am setting up a directory for Monsters for a mobile game with Toolset view using the filters and search function provided in the view. The monsters are showing a tooltip to explain their skills. The tooltip works as expected on first page load, so you can see what my intention was. However once a filter is applied to the content, the tooltip only shows raw html code instead.

What is the link to your site?
hidden link

Further explenation:
After the filters are used on the front page, like for example you filter by element "Dark" the page loads all the "Dark Monsters" perfectly. So far so good.

However, the page is provided with tooltips which are seen on the skills from the monsters. The smaller images inside the monster cards.

When the ajax has adapted the view by the provided filters the tooltip is no longer executed but shows the raw html code instead of the proper make up. Now I saw in another thread this had something to do with Jquery having to reload after an ajax result but I could not follow the explenation to what needed to actually be done so to make the tooltips html execute again.

If I make the page fully refresh instead of ajaxing the result the tooltips work without a problem. However this causes the issue that my visitors think that the filters don't work. Because they set a filter and expect to see the results instead they select a filter and must press enter in the search field to update the results. This is confusing and not very user friendly so I really want the tooltips to work after updating the results with ajax.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Charlene,

Thank you for contacting us and I'd be happy to assist.

To suggest the best way to re-initialize the tooltip script, after the results have updated through the AJAX, I'll need to see exactly how this view is set up in the admin area.

Can you please share temporary admin login details in reply to this message?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing the admin access.

I noticed that the following script is included in the view "Skills", to initialize the Tooltip script:

(function($) {
        $(document).ready(function() {

                $('[data-toggle="tooltip"]').tooltip();

        });
})(jQuery);

But this only executes when the page loads or reloads. To make it also execute when the results have updated through AJAX (i.e. without a page reload), you can include the following function in the "Monster Archive" view:
( screenshot: hidden link )

function resultsUpdated(){
  jQuery('[data-toggle="tooltip"]').tooltip();
}

Next, you'll add this new function's name "resultsUpdated" in the "will run after updating the results" field, under the "Custom Search Settings" section, in the same view.
( screenshot: hidden link )

I hope this helps and please let me know if you need any further assistance around this.

[CharleneD1435]

That solved it! Thank you so much for the clear and easy to follow instructions.