Demo/Playground/Playground.Avatars.js
function () {
      
      // Set title and content depending on current index
      this.setTitle(DemoAvatars.Avatars[DemoAvatars.current]);
      this.content.css({backgroundImage: 'url(https://stephanwagner.me/img/jBox/avatar/' + DemoAvatars.Avatars[DemoAvatars.current] + '.svg)'});
      
      // If it's the inital jBox, show the tooltips after a short delay
      initial && setTimeout(function () {
        
        // We are creating the two tooltips in a loop as they are very similar
        $.each(['Dislike', 'Like'], function (index, item) {
          
          // We store the tooltips in the global var so we can refer to them later
          DemoAvatars['AvatarsTooltip' + item] = new jBox('Tooltip', {
            theme: 'TooltipBorder',
            addClass: 'AvatarsTooltip AvatarsTooltip' + item,
            minWidth: 110,
            content: item,
            position: {
              y: 'bottom'
            },
            offset: {
              y: 5
            },
            target: '#AvatarsInitial .jBox-footer .button-' + (item == 'Like' ? 'heart' : 'cross'),
            animation: 'move',
            zIndex: 11000,
            
            // Abort opening the tooltips when we clicked on a like or dislike button already
            onOpen: function () {
              DemoAvatars.clicked && this.close();
            }
          }).open();
          
        });
        
      }, 500);
    }
function () {
      
      // Set title and content depending on current index
      this.setTitle(DemoAvatars.Avatars[DemoAvatars.current]);
      this.content.css({backgroundImage: 'url(https://stephanwagner.me/img/jBox/avatar/' + DemoAvatars.Avatars[DemoAvatars.current] + '.svg)'});
      
      // If it's the inital jBox, show the tooltips after a short delay
      initial && setTimeout(function () {
        
        // We are creating the two tooltips in a loop as they are very similar
        $.each(['Dislike', 'Like'], function (index, item) {
          
          // We store the tooltips in the global var so we can refer to them later
          DemoAvatars['AvatarsTooltip' + item] = new jBox('Tooltip', {
            theme: 'TooltipBorder',
            addClass: 'AvatarsTooltip AvatarsTooltip' + item,
            minWidth: 110,
            content: item,
            position: {
              y: 'bottom'
            },
            offset: {
              y: 5
            },
            target: '#AvatarsInitial .jBox-footer .button-' + (item == 'Like' ? 'heart' : 'cross'),
            animation: 'move',
            zIndex: 11000,
            
            // Abort opening the tooltips when we clicked on a like or dislike button already
            onOpen: function () {
              DemoAvatars.clicked && this.close();
            }
          }).open();
          
        });
        
      }, 500);
    }
function ( ) { // Set title and content depending on current index this . setTitle ( DemoAvatars . Avatars [ DemoAvatars . current ] ) ; this . content . css ( { backgroundImage : 'url(https://stephanwagner.me/img/jBox/avatar/' + DemoAvatars . Avatars [ DemoAvatars . current ] + '.svg)' } ) ; // If it's the inital jBox, show the tooltips after a short delay initial && setTimeout ( function ( ) { // We are creating the two tooltips in a loop as they are very similar $ . each ( [ 'Dislike' , 'Like' ] , function ( index , item ) { // We store the tooltips in the global var so we can refer to them later DemoAvatars [ 'AvatarsTooltip' + item ] = new jBox ( 'Tooltip' , { theme : 'TooltipBorder' , addClass : 'AvatarsTooltip AvatarsTooltip' + item , minWidth : 110 , content : item , position : { y : 'bottom' } , offset : { y : 5 } , target : '#AvatarsInitial .jBox-footer .button-' + ( item == 'Like' ? 'heart' : 'cross' ) , animation : 'move' , zIndex : 11000 , // Abort opening the tooltips when we clicked on a like or dislike button already onOpen : function ( ) { DemoAvatars . clicked && this . close ( ) ; } } ) . open ( ) ; } ) ; } , 500 ) ; }
When we open the jBox, set the new content and show the tooltips if it's the initial jBox
When we open the jBox set the new content and show the tooltips if it s the initial jBox