Home Forums Porto Admin Template Tooltip class changes when reinitialize tooltip after opening a modal with ajax

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #10030604
    jm
    Participant

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

    Normal tooltip:
    Normal Tooltip

    Ajax tooltip:
    Ajax loaded tooltip

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

    Is this an expected behavior?


    #10030607
    Support
    Keymaster

    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


    #10030609
    jm
    Participant

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


    #10030610
    jm
    Participant

    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 3 months, 2 weeks ago by jm.
    #10030612
    jm
    Participant

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


    #10030613
    Support2
    Keymaster

    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.


    #10030619
    jm
    Participant

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


    #10030620
    jm
    Participant

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


    • This reply was modified 3 months, 1 week ago by jm.
    #10030629
    Support2
    Keymaster

    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.


    #10030634
    jm
    Participant

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


    • This reply was modified 3 months, 1 week ago by jm.
    #10030638
    Support2
    Keymaster

    Hello,

    Great!

    If you need further assistance feel free to contact us.

    Kind Regards,

    Rodrigo.


Viewing 11 posts - 1 through 11 (of 11 total)