Tooltip class changes when reinitialize tooltip after opening a modal with ajax

[jm]

Tooltip class changes when reinitialize tooltip after opening a modal with ajax loaded content.

Normal tooltip:

Ajax tooltip:

On shown.bs.modal event i reinitialize the tooltip function with this code:
$(‘[data-toggle=”tooltip”]’).tooltip();

Is this an expected behavior?

---

[Support]

Hello, I’ve made a quick test here use DevTools.

1) I added the tooltip after the page loaded with this HTML:

<button type="button" class="btn btn-primary m-xs" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>

2) Used this code to initialize:

if ( $.isFunction( $.fn['tooltip'] ) ) {
	$( '[data-toggle=tooltip],[rel=tooltip]' ).tooltip({ container: 'body' });
}

It worked well, please try that and let me know if the problem persists.

Kind Regards,

Jonas

---

[jm]

Still no luck. But maybe I should have mentioned that it’s a Bootstrap modal?

---

[jm]

This is my code:

  $('body').on('shown.bs.modal', function (e) {
     var href = $(e.relatedTarget).attr("href");
   	var target = $(e.relatedTarget).attr("data-target");

   if(typeof href !== typeof undefined && href !== false)
    {
 

       $.get(href, function(output)
       {

         $('body').find(target + ' .modal-content').html(output);

 // Reinit toggles
        if ($.isFunction($.fn['themePluginToggle'])) {

        	$(function() {
        		$('[data-plugin-toggle]:not(.manual)').each(function() {
        			var $this = $(this),
        				opts;

        			var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
        			if (pluginOptions)
        				opts = pluginOptions;

        			$this.themePluginToggle(opts);
        		});
        	});

        }

        // Reinit tooltip
        if ( $.isFunction( $.fn['tooltip'] ) ) {
          console.log('tooltip');
        	$( '[data-toggle=tooltip],[rel=tooltip]' ).tooltip({ container: 'body' });
        }
 });
     }

   });

---

• This reply was modified 4 years, 7 months ago by jm.

[jm]

Hmm weird. But it works in your template of the shelf…

---

[Support2]

Hello,

How are you doing the AJAX within a boostrap modal ?

You need run the tooltip initilize code after the ajax content is added on the page.

Normally we use callbacks for it, for example in a simple jquery ajax:

$.ajax({
	url: '/path/to/file',
	type: 'default GET (Other values: POST)',
	dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
	data: {param1: 'value1'},
})
.done(function() {
	
	if ( $.isFunction( $.fn['tooltip'] ) ) {
		$( '[data-toggle=tooltip],[rel=tooltip]' ).tooltip({ container: 'body' });
	}

});

If you are using the AJAX example here http://preview.oklerthemes.com/porto-admin/2.2.0/ui-elements-modals.html, then you need change the “Ajax” code in “js/examples/examples.modals.js” to:

/*
Ajax
*/
$('.simple-ajax-modal').magnificPopup({
	type: 'ajax',
	modal: true,
	callbacks: {
		ajaxContentAdded: function() {
			if ( $.isFunction( $.fn['tooltip'] ) ) {
				$( '[data-toggle=tooltip],[rel=tooltip]' ).tooltip({ container: 'body' });
			}
		}
	}
});

If any of suggestions above don’t solve your issue please send a online link with your website for us, so we can inspect your code and help you.

Kind Regards,

Rodrigo.

---

[jm]

That is actually how I’m doing it. The tooltip js works. But the CSS is different.

---

[jm]

I just noticed, that if I use the rel=”tooltip” and not data-toggle=”tooltip” it the same white tooltip.

---

• This reply was modified 4 years, 7 months ago by jm.

[Support2]

Hello,

Please send a online test link with your website for us, so we can inspect your code, do some tests and discover where is the issue.

Kind Regards,

Rodrigo.

---

[jm]

I found it. I called the jquery-ui.js script a tad to late.
Thanks for the help though.

---

• This reply was modified 4 years, 7 months ago by jm.

[Support2]

Hello,

Great!

If you need further assistance feel free to contact us.

Kind Regards,

Rodrigo.

---

[Author]

Posts