Evgeny Vyushin

Tipped.create('#demo-json', {
          showOn: 'click',
          hideOn: 'click',
          hideOnClickOutside: true,
          padding: false,
          ajax: {
            url: '/js/default/index/brands.json',
            dataType: 'json',
            success: function(data, textStatus, jqXHR) {
              var brands = data.brands;

              // wrapper for scroll
              var scrollable = $('<div>').addClass('tooltip-brands tse-scrollable');

              var links;
              scrollable.append(links = $('<div>').addClass('links tse-content'));

              // container that holds the names
              $.each(brands, function(i, brand) {
                var link;

                links.append(link = $('<a>').addClass('close-tooltip')
                  .attr({ href: '#brand-' + brand.id })
                  .append($('<span>').html(brand.name))
                );

                if (i == brands.length - 1) link.addClass('last');

                // clicking the link shouldn't do anything, just for this demo
                // we'll make it hide the tooltip
                link.bind('click', function(event) { event.preventDefault();  });
              });

              return scrollable;
            }
          },

          afterUpdate: function(content) {
            var scrollable = $(content).find('.tse-scrollable');
            scrollable.TrackpadScrollEmulator({ autoHide: false });
          },

          onShow: function(content, element) {
            var scrollable = $(content).find('.tse-scrollable');
            scrollable.find('.tse-scroll-content').scrollTop(0);
            scrollable.TrackpadScrollEmulator('recalculate');
          }
        });