Как сделать tooltip со скроллом?

Question

[VanKrock]

Как сделать tooltip со скроллом примерно как у TippedJS ?

Answer 1

[Петр]

Тултип это обычный блок. Ему можно задать

block{
     max-height: 50px;
     overflow-y: auto;
}

И если его содержимое больше максимальной ширины, то появится скролл

Answer 2

[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');
          }
        });

Comments

[VanKrock]

Я это пробовал, но что-то у меня не завелось

[Evgeny Vyushin]

Надо кастомизировать этот код под ваш конкретный случай.
Изменить #demo-json на ID вашего элемента, изменить AJAX.url на ваш URL и т. д.

Скачать библиотеку и прикрепить её к проекту тоже соответственно. :)

[Evgeny Vyushin]

www.tippedjs.com/download

[VanKrock]

Evgeny Vyushin: Да я это все сделал, собственно уже после этого я и написал сюда ajax доступен в pro версии. Но интересно больше как это в принципе сделано

[Evgeny Vyushin]

Нужно ещё переписать функцию success, по тому что там ожидается свойство data.brands.
Из этого JSON формируется список www.tippedjs.com/js/default/index/brands.json

[VanKrock]

Evgeny Vyushin: да, я знаю, но при запуске не выполняется сам ajax вообще

[Evgeny Vyushin]

VanKrock: сделано при помощи библиотеки Tipped, написанной на CSS, JS и HTML.
В качестве скролла используется TrackpadScrollEmulator — https://github.com/jnicol/trackpad-scroll-emulator.

[Evgeny Vyushin]

https://github.com/jnicol/trackpad-scroll-emulator

[VanKrock]

ооо, огромное спасибо, вот этого я не заметил

[Evgeny Vyushin]

VanKrock: рад, что удалось помочь. :)