Наши контакты:
Обратная связь:
044383 30 94Не звоните ночью, уважаемые!

Tooltipster представляет собой легкий и простой в стиле JQuery плагин, который поможет вам легко создавать всплывающие подсказки. Стиль вашей Tooltipsters-подсказки может быть легко изменен спомощью специально приготовленых тем. У вас также есть возможность создать и прикрепить новую тему.
Tooltipster дает Вам широкий спектр переменных чтобы настроить вашу подсказку к содержимому вашего сайта.

  1. $('.tooltip').tooltipster({
  2. animation: 'fade',
  3. arrow: true,
  4. arrowColor: '',
  5. content: '',
  6. delay: 200,
  7. fixedWidth: 0,
  8. maxWidth: 0,
  9. functionBefore: function(origin, continueTooltip) {
  10. continueTooltip();
  11. },
  12. functionReady: function(origin, tooltip) {},
  13. functionAfter: function(origin) {},
  14. icon: '(?)',
  15. iconDesktop: false,
  16. iconTouch: false,
  17. iconTheme: '.tooltipster-icon',
  18. interactive: false,
  19. interactiveTolerance: 350,
  20. offsetX: 0,
  21. offsetY: 0,
  22. onlyOne: true,
  23. position: 'top',
  24. speed: 350,
  25. timer: 0,
  26. theme: '.tooltipster-default',
  27. touchDevices: true,
  28. trigger: 'hover',
  29. updateAnimation: true
  30. });



fade, grow, swing, slide, fallDetermines how the tooltip will animate in and out. Feel free to modify or create custom transitions in the tooltipster.css file. In IE9 and 8, all animations default to a JavaScript generated, fade animation. Default: 'fade'


booleanAdds the "speech bubble arrow" to the tooltip. Default: true


hex code / rgbSelect a specific color for the "speech bubble arrow". Default: will inherit the tooltip's background color


stringIf set, this will override the content of the tooltip. Default: ''


integerDelay how long it takes (in milliseconds) for the tooltip to start animating in.Default: 200


integerSet a fixed width for the tooltip. The tooltip will always be a consistent width - no matter your content size. Default: 0 (auto width)


integerSet a max width for the tooltip. If the tooltip ends up being smaller than the set max width, the tooltip's width will be set automatically. Default: 0 (no max width)


functionCreate a custom function to be fired before the tooltip launches. See theadvanced section to learn more. Default: function(origin, continueTooltip) { continueTooltip(); }


functionCreate a custom function to be fired when the tooltip and its contents have been added to the DOM. Default: function(origin, tooltip) {}


functionCreate a custom function to be fired once the tooltip has been closed and removed from the DOM. Default: function(origin) {}


stringIf using the iconDesktop or iconTouch options, this sets the content for your icon. Default: '(?)'


CSS classIf using the iconDesktop or iconTouch options, this sets the class on the icon (used to style the icon). Default: '.tooltipster-icon'


booleanGenerate an icon next to your content that is responsible for activating the tooltip on non-touch devices. Default: false


booleanGenerate an icon next to your content that is responsible for activating the tooltip on touch devices (tablets, phones, etc). Default: false


booleanCreate a delay that allows users to interact with the tooltip. The tooltip will close after the user hovers off the tooltip or taps off of it. Default: false


booleanIf the tooltip is interactive and activated by a hover event, set the amount of time (milliseconds) allowed for a user to hover off of the tooltip activator (origin) on to the tooltip itself - keeping the tooltip from closing. Default: 350


integerOffsets the tooltip (in pixels) farther left/right from the origin. Default: 0


integerOffsets the tooltip (in pixels) farther up/down from the origin. Default: 0


booleanIf true, only one tooltip will be allowed to be active at a time. Default: true


right, left, top, top-right, top-left, bottom, bottom-right, bottom-leftSet the position of the tooltip. Default: 'top'


integerSet the speed of the animation. Default: 350


integerHow long the tooltip should be allowed to live before closing. Default: 0 (disabled)


CSS classSet the theme used for your tooltip. Default: '.tooltipster-default'


booleanIf true, Tooltipster will run on touch devices (tablets, phones, etc). Default: true


hover, click, customSet how tooltips should be activated and closed. See the advanced section to learn how to build custom triggers. Default: 'hover'


booleanIf a tooltip is open while its content is updated, play a subtle animation when the content changes. Default: true