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


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. });

Options

animation

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'

arrow

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

arrowColor

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

content

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

delay

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

fixedWidth

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

maxWidth

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)

functionBefore

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

functionReady

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

functionAfter

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

icon

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

iconTheme

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

iconDesktop

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

iconTouch

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

interactive

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

interactiveTolerance

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

offsetX

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

offsetY

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

onlyOne

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

position

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

speed

integerSet the speed of the animation. Default: 350

timer

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

theme

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

touchDevices

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

trigger

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

updateAnimation

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