PHPackages components/jquery-smallipop - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. components/jquery-smallipop AbandonedComponent components/jquery-smallipop =========================== Tooltip Popup for jQuery 0.6.4(11y ago)7631713[10 issues](https://github.com/Sebobo/jquery.smallipop/issues)MITJavaScript Since Feb 27Pushed 7y ago7 watchersCompare [ Source](https://github.com/Sebobo/jquery.smallipop)[ Packagist](https://packagist.org/packages/components/jquery-smallipop)[ Docs](http://projects.sebastianhelzle.net/jquery.smallipop/)[ RSS](/packages/components-jquery-smallipop/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (3)Versions (2)Used By (0) [![Stories in Ready](https://camo.githubusercontent.com/495a1cc23c11089207aec1093b4692a943dea51b40395dadbd9f1c4a4cea1033/68747470733a2f2f62616467652e776166666c652e696f2f7365626f626f2f6a71756572792e736d616c6c69706f702e706e673f6c6162656c3d7265616479267469746c653d5265616479)](https://waffle.io/sebobo/jquery.smallipop)[![Build Status](https://camo.githubusercontent.com/2c4151e691aee87bf282bd05823b533d6226e1b59289f638b6e0d6f9a3c087ec/68747470733a2f2f7472617669732d63692e6f72672f5365626f626f2f6a71756572792e736d616c6c69706f702e737667)](https://travis-ci.org/Sebobo/jquery.smallipop) smallipop ========= [](#smallipop) [Small Improvements](http://www.small-improvements.com) info popup This jQuery plugin has been created because all the tooltips we tested didn't meet our requirements. We wanted: - **Pure css** for the design. Fallbacks for older browsers and no images. - **CSS Animations** are supported. - **Custom themes** for different use cases. - The popup trigger **can be positioned anywhere**. The popup will be displayed at the body root, so the position won't be affected by your layout. - **Automatic orientation** whereever the popup appears. The popup will try to stay in the visible area of the screen, even when scrolling or at the edges. - **Only a single popup** element in the document. Some plugins create a hidden popup for each trigger. - **Custom options** for each trigger. You can have 20 different popups with 20 different themes on one page if you like. - **Small**. Only ~ 3.5KB minified and ~ 2KB gziped. We are starting to use this plugin for a lot of things, so watch for new releases at [github](https://github.com/Sebobo/jquery.smallipop). See the [documentation page](http://sebobo.github.com/jquery.smallipop/) for a live demo and examples. Do you like this project? [Buy me a beer](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TSN2TDYNKZHF4) Installation ------------ [](#installation) ### Prequisites [](#prequisites) - [jQuery](http://www.jquery.com) - 1.5.2 or better - [Modernizr](http://www.modernizr.com) - This library tests the browser for feature support and adds classes to the body tag. We use this for css fallbacks in our themes. Both are also provided in the `lib` folder. If you don't want to use the `Modernizr` library you can remove the `.cssgradients`, `.borderradius`, `.rgba` and `.boxshadow` classes in `css/jquery-smallipop.css`. ### Required files [](#required-files) Copy `lib/jquery-smallipop.js` to your javascript folder. Copy `css/jquery-smallipop.css` to your css folder. Usage ----- [](#usage) If you like demos more than a boring documentation see the `index.html` file and play with it. The plugin can be called with jQuery in different ways. ### Standard call with default theme and settings: [](#standard-call-with-default-theme-and-settings) ``` $('.myElement').smallipop(); ``` #### Popup content and markup [](#popup-content-and-markup) If `myElement` is a `` tag, the elements `title` attribute is used as popup text: ``` Sample link ``` You can also provide the text in javascript for all selected elements: ``` $('.myElement').smallipop({}, 'This is my special hint'); ``` If `myElement` contains an element with the `smallipop-hint` class, it's content is copied into the popup when displayed. This can be any markup content you like. Be careful when using floating elements as content, they need a clearfix afterwards or jQuery is unable to get the correct size for the popup. ``` Sample link My bubble title Some text for the bubble ``` The plugin first checks if the text has been provided in the javascript call. If not then the `title` attribute will be used, if the trigger is a link. If not the element will be checked if it contains another element with the `smallipop-hint` class, and it's html content will be used. #### Using a different theme: [](#using-a-different-theme) ``` $('.myElement').smallipop({ theme: 'white' }); ``` #### Hide the popup trigger while displaying the popup: [](#hide-the-popup-trigger-while-displaying-the-popup) ``` $('.myElement').smallipop({ hideTrigger: true }); ``` #### Provide the hint in javascript: [](#provide-the-hint-in-javascript) ``` $('.myElement').smallipop({}, 'This is my special hint'); ``` #### Changing the default theme for all subsequently created popups: [](#changing-the-default-theme-for-all-subsequently-created-popups) ``` $.smallipop.defaults.theme = 'black' ``` You can change the default value for all other options as well in this way. ### Options [](#options) - popupOffset: horizontal offset for the popup. Default is `31`. - popupYOffset: vertical offset for the popup. Default is `0`. - popupDistance: vertical distance when the popup appears and disappears. Default is `20`. - hideTrigger: hide the trigger when the popup is shown. Default is `false`. - theme: `black`, `orange`, `blue`, `white` and `default` are included in the css file. Default is `default`. - infoClass: Class in an element which contains markup content for the popup. Default is `smallipop-hint`. - popupDelay: How much time in milliseconds you have to hover on an element before the popups shows up. Default is `100`. - triggerAnimationSpeed: How fast the trigger fades in and out when `hideTrigger` is enabled, default is `150`. - popupAnimationSpeed: How much time the popup needs to reach it's final animation position and opacity in milliseconds. Default is `200`. - invertAnimation: The popup will move up when an element is hovered and further up when fading out. If you set this to true, the popup will move down when fading out. Default is `false`. - horizontal: The popup will be positioned left or right of the trigger. Default is `false`. Editing ------- [](#editing) Read this chapter if you want to modify or extend smallipop. The plugin is written in [coffeescript](http://jashkenas.github.com/coffee-script/) and the css with [sass](http://sass-lang.com/). The sources are provided in the `src` and `scss` folders. So you can either work with the compiled `.js` and `.css` files in your project or use the coffeescript and sass files. I have provided a combined watcher script `watcher.py` which starts the two watcher daemons, when your editing the files. This requires the installation of python, coffeescript and sass. You can find very good installation instructions on the project homepages. The generated css for the themes is quite long. Remove any themes you don't need. The css used for the popup arrow is a bit tricky. If you want to change it, you need to know how css borders are rendered or you use images instead. Feedback -------- [](#feedback) Please send me an [email](sebastian@helzle.net) or a tweet @sebobo with any feedback you have. This plugin was my first attempt at a custom tooltip, coffeescript and scss, so any ideas for improvement are welcome. Contributing ------------ [](#contributing) Clone the repository, make changes, run `grunt qunit` and create a pull request. ### Health Score 31 — LowBetter than 68% of packages Maintenance17 Infrequent updates — may be unmaintained Popularity27 Limited adoption so far Community19 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 4098d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/5c9f106db319e8698dcb4aedfe8034f0442d379ebbd78fcd67b884999b2236f1?d=identicon)[Sebobo](/maintainers/Sebobo) --- Top Contributors [![Sebobo](https://avatars.githubusercontent.com/u/596967?v=4)](https://github.com/Sebobo "Sebobo (6 commits)")[![zalog](https://avatars.githubusercontent.com/u/985838?v=4)](https://github.com/zalog "zalog (5 commits)")[![waza-ari](https://avatars.githubusercontent.com/u/4508976?v=4)](https://github.com/waza-ari "waza-ari (3 commits)")[![cweiske](https://avatars.githubusercontent.com/u/59036?v=4)](https://github.com/cweiske "cweiske (1 commits)")[![waffle-iron](https://avatars.githubusercontent.com/u/6912981?v=4)](https://github.com/waffle-iron "waffle-iron (1 commits)") --- Tags cssjqueryanimationtooltip ### Embed Badge ![Health badge](/badges/components-jquery-smallipop/health.svg) ``` [![Health](https://phpackages.com/badges/components-jquery-smallipop/health.svg)](https://phpackages.com/packages/components-jquery-smallipop) ``` ### Alternatives [querypath/querypath HTML/XML querying and processing (like jQuery) 8197.0M27](/packages/querypath-querypath)[flesler/jquery.scrollto Lightweight, cross-browser and highly customizable animated scrolling with jQuery 3.7k40.1k](/packages/flesler-jqueryscrollto)[onokumus/metismenu A jQuery menu plugin 2.0k263.3k5](/packages/onokumus-metismenu)[mistic100/jquery-querybuilder jQuery plugin for user friendly query/filter creator 1.7k54.1k2](/packages/mistic100-jquery-querybuilder)[sciactive/pnotify Beautiful JavaScript notifications. 3.6k6.4k](/packages/sciactive-pnotify)[tooltipster/tooltipster Tooltipster is a flexible and extensible jQuery plugin for modern tooltips. 2.7k9.4k2](/packages/tooltipster-tooltipster) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)