sebobo / jquery.smallipop

Tooltip popup for jQuery

smallipop

Small Improvements 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.

See the documentation page for a live demo and examples.

Do you like this project? Buy me a beer

Installation

Prequisites

• jQuery - 1.5.2 or better
• Modernizr - 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

Copy lib/jquery-smallipop.js to your javascript folder. Copy css/jquery-smallipop.css to your css folder.

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:

$('.myElement').smallipop();

Popup content and markup

If myElement is a <a> tag, the elements title attribute is used as popup text:

<a class="myElement" href="#" title="Some hint text">
    Sample link
</a>

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.

<div class="myElement">
    Sample link
    <span class="smallipop-hint">
       <h6>My bubble title</h6>
       <p>Some text for the bubble</p>
    </span>
</div>

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:

$('.myElement').smallipop({
    theme: 'white'
});

Hide the popup trigger while displaying the popup:

$('.myElement').smallipop({
    hideTrigger: true
});

Provide the hint in javascript:

$('.myElement').smallipop({}, 'This is my special hint');

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

• 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

Read this chapter if you want to modify or extend smallipop.

The plugin is written in coffeescript and the css with sass. 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

Please send me an email 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

Clone the repository, make changes, run grunt qunit and create a pull request.

jquery.smallipop's Issues

Feature Suggestion: smallipop container position

This is a standard request on pretty much every modal/dialog/lightbox script but not so much on tooltips so maybe it's out of the scope of possibility.

Basically, allow the smallipop container to be placed next to the object rather than at the end of the DOM, inside the body tag. I also realise that this is probably what makes smallipop so fast - it only creates a single element.

An alternative could be to allow a link to set smallipop position absolute or fixed depending on the trigger element. This would be really useful for web apps where not every part of the interface scrolls. I can email you examples if you'd like Sebastian.

This is very much just a suggestion!

Best regards,
Oisin

bug on closely positioned elements

Hi Sebastian,

I've found a little bug... if you move your mouse over and back over closely positioned elements, the smallipop doesn't always popup on the element the mouse finally stops on.

I found this bug when developing my own portfolio website: http://www.sherpanaut.com (click on "connect"...)

method to close the tour manually

I'm adding a 2nd close option on every tour popup. This is being done to allow the user to stop the tour from auto-running in the future (when triggered, I'll save that decision via cookie so that future pages don't auto start the tour based on that cookie). I've successfully added a button to the popup content and bound the button click() to call the following internal method (I found no other method provided to close the tour in the documentation and .smallipop('hide') doesn't work in tour mode)

$.smallipop._tourClose();

The button click event fires but the code above does not actually close the tour. Is there a way to manually trigger the tour to close?

Popup Content Not Cleared Before Appended

I'm trying to use smallipop with an image, like so:

<a href="" class="smallipop" data-smallipop-referenced-content=".pop1" title="Title"
<img src="/image.png" alt=""/>
</a>
<div class="hidden">
<img class="pop1" src="/image.png" alt=""/>
</div>

$('.smallipop').smallipop({
    cssAnimations: {
        enabled: true,
        show: 'animated fadeInUp',
        hide: 'animated fadeOutUp'
    },
    theme: 'white'
});

It works perfectly, except if I hover over the same tip more than once, the content is not cleared before the image is appended. So if I hover over the same tip twice, two images will show. Four hovers, four images. etc. However, If I hover over another tip the content is cleared.

Any thoughts on how to approach this?

Custom html content trouble

I can't style the html content that goes in to the tooltip. I'm giving the content a fixed width and height but it get's ignored by the tooltip.

Add composer support

It would be great if you could add composer support, providing correct requirements and using component-installer to provide the required JS, CSS and Image files.

Use Case: Many projects use composer, and it is annoying to manage libraries which are used via composer, and manually installed libraries. Thanks!

Feature suggestion: preferredPosition and other stuff for individual smallipops

As far as I understood, you set 'preferredPosition' per instance of smallipops. For a tour it would be handy to be able to set them for dialogs individually. For other features it might be usefull as well. Maybe you could have it all in one data-element to overwrite the default given at initiation?

data-smallipop="{preferredPosition: left, popupOffset: 5, theme: 'white'}"

Option to make tooltip stay open until click

Is there any way to have the tool tip stay open until the it's clicked or space outside of tooltip is clicked?
Thanks.

Uncaught TypeError: Cannot read property 'defaultView' of null

Chromium 33.0.1750.152 with smallipop 0.6.1 gives me the following error:

Uncaught TypeError: Cannot read property 'defaultView' of null

This is because

while (elemToCheck.length && elemToCheck[0].nodeName !== 'HTML') {

uses an uppercase nodeName, while Chromium provides a lowercase one ("html").

Change Trigger Type

Hi Sebastian,

Great functioning plugin. I was thinking of using this on a site that is aimed at mobile devices, and have a feature request to make this possible. Is there a way to add an option to have the trigger be either hover or click?

Cheers,
Matt

Smallipop Not working in firefox

any solution Please

Smallipops of boxes that are higher than the viewport appear below the viewport

Maybe the Smallipop could point somewhere to the inside of the targeted element or at the side of it.

Example: http://timurcelikel.com/tmp/smallipop_issue_01/

Feature Suggestion: Click option

An option to prevent the smallipop from hiding upon click and just hide it when clicked outside of the smallipop.

The use case:
I've been using smallipop as a popup menu which works really great but when I click an item the smallipop disappears. The user might not be finished with the menu.

Let me know what you think Sebastian!

Usability Enhancement: Improved clickable area

Before:

After:

Smallipop should add the following to its styles to stop the divs which create the popup 'triangle' from preventing a user from clicking an element beneath.

.sipArrow,
.sipArrowBorder {
  pointer-events: none;
}

how to keep form tip for the duration of focus on input?

using the example on the documentation page when i hover over another element with a tooltip the form input tooltip is hidden

jquery on

can you give some examples (one for regular one for input) using smallipop with on

i tried

$("body").on("mouseover","button[title!=],a[title!=],img[title!=],span[title!=]", function () {
$(this).smallipop({
popupId : 'rest',
preferredPosition: 'top',
theme : 'black',
});
});

but it shows only on the second hover

Touch devices - leave tip open when touched.

I'm using smallipop to display a sign in form when touched. It will stay open on computers but when you tap the field to type in it the popup goes away. Am I doing something wrong?

$('.smallipopClick').smallipop({
    theme: 'blue fatShadow',
    popupDelay: 250,
    hideOnPopupClick: false,
    triggerOnClick: true,
    hideDelay: 400000,
    invertAnimation: true
});

Feature Suggestion: show/hide method

It would be great if there was a method to show and hide smallipops, something like:

$("#mySmallipopButton").smallipop("show");
$("#mySmallipopButton").smallipop("hide");

Tour scrolls to fixed elements

Taking a tour that has fixed elements, the page scrolls to elements although they are fixed or within fixed elements. In our example we got a bar at the bottom and the page scrolls to the bottom, although the bar is fixed.

update smallipop content

Hi,

I absolutely love smallipop, looks and works really well.

At the moment I'm having a little trouble. I am using smallipop to show a simple menu which when clicked, the item is given a class="current". This works fine but when the panel appears again the class has been cleared and the original markup is shown.

I see that the smallipop content is copied to a data attribute at run time so I guess this is the reason. Is there anyway to update this data?

Alternatively, is there a way smallipop can be destroyed so it can be generated again with the updated HTML?

Best regards,
Oisin

Method to refresh smallipop positioning

In a responsive design, the smallipop doesn't refresh its position after resizing so the arrow more often than not ends up pointing to the wrong word.

Is there a method to refresh it's positioning?

I love smallipop and with some more development it could be the best tooltip plugin. Please reply and prove to me that smallipop development isn't dead!

Best regards,
Oisin

position calculator is wrong or arrow position is wrong

hover over the "Download smallipop now" button scroll down then up
firefox 22.0

$.smallipop.setContent doesn't work

The demo code under "Change content on the fly and use callbacks" doesn't work. Firebug console says, "TypeError: $.smallipop.setContent is not a function".

mouseout auto hide?

IM sorry i am new here and i dont know where else to put this question.

I cannot find a way to auto hide the tooltip on mouseout from the trigger. is there an onmouseout event i can call from the trigger div?

Smallipop and jQuery 1.8

Any chance of getting jQuery 1.8 support?

Allow manual open/close

Right now, Smallipop is called this way :

$('.myElement').smallipop({options});

It would be nice if it were possible to additionally call it this way

var mySmallipop = $('.myElement').smallipop({options}).init()
$('.myElement').on('click touch mouseenter', function() {
    $('.myElement').smallipop().open();

    //Or

    mySmallipop.open();
});

And then :

$('.myCloseButton').on('click touch', function() {
    $('.myElement').smallipop().close();

    //Or

    mySmallipop.close();
});

As well as a method to change the Smallipop instance's options while it's already initiated.

$('.myElement').smallipop().options({});

//Or

mySmallipop.options({options});

It would allow for much greater customization. While the current options allow for many things, this sort of capability would make possibilities nearly endless.

$(".element").smallipop("show") not working

Hi. Lovely plugin you have made. Really sets itself apart from the rest I have tried. I seem to be having a major issue getting $(".element").smallipop("show") to work. It works well with the $(".element").smallipop() option when I scroll over but with the "show" option parameter in, nothing works. Please help. Thanks

reposition sugestion for responsive layouts

hi

when used for input forms on a small screen (like tablet or phone with almost no space on left or right) of the form or on browser resize with the same situation where space is scarce you should reposition on top or bottom
or give a option repositionOrder like preferredPosition
so if i have the tips on right i set repositionOrder left top and the plugin should try to place on left if no space try top if no space try bottom else try your best (current behavior)

Feature suggestion: Close or cancel-button during tour

Would be awesome to be able to have a cancel-button, something like an 'x' at one top corner.

Tooltip is closing after click on it

The option "hideOnPopupClick" won't work :)

Wrong class name "smallipopHint" in the Readme

The contained element with the markup content to show in the smallipop should be inside a ".smallipop-hint" element. Please change the "smallipopHint" to "smallipop-hint" in the Readme.

set width black theme

I've tried setting a style for a set width, which seems to work when I switch to the white theme, but has no effect when using the black theme. Is there another way to specifically set the width when using the black theme? Thank you.

Display onload

Feature request: display smallipops onload without requiring use of the tour feature.

Tap on touch devices

How about displaying tooltip on tap? I've tested on my Android phone and it's not working, even it closes entire browser on tap to display a tooltip.

onTourClose does not fire on ESC

It does fire on click of the X and when the tour is finished though.

example: http://timurcelikel.com/tmp/smallipop_issue_02/ (console.log() on onTourClose)

The plugin creates a smallipop instance even when there are no smallipops in the selector

Feature Request: Tour style click events

I would like the ability to add a click event that opens up a popup, which stays open, and (like the tour pop-ups) close only on clicking a close link in the actual popup.

Is this currently possible? (I couldn't figure it out.)

Thanks!
Darren

Enabling cssAnimations to true causes the tour guides to not close properly when close is clicked during a tour.

cssAnimations: {
enabled: false,
show: 'animated fadeIn',
hide: 'animated fadeOut'
}

tourHighlight conflicts with jquery UI?

When adding this to an application that uses jQueryUI, the page overlay capability seems to conflict. Here are two examples when tourHighlight = true:

1. Once a section is highlighted by smallipop tour, it remains forever "highlighted". As the tour goes from section to section, the previous sections never regain the overlay and get masked out. If you close the tour and reopen, all previously tour highlighted sections are still highlighted (i.e. overlay only shows up where it was never removed, and once the mask is removed on an element, it's gone until page refresh)
2. when jQueryUI opens a modal dialog, the page overlay shows the same "holes" in the page masking that were created during a "tour". For example, I open a tour and it highlights a DIV, then I close the tour. If I then open a jquery dialog, that same DIV is highlighted because the mask doesn't cover that item. The items that are not masked are clickable, which breaks the modal capability of the jQueryUI dialog.

Overall it appears the page overlay has a conflict with jQueryUI in some way. Any ideas?

IE8 Error

Hi,
Smallipop version 0.1.5 is causing an "invalid argument" javascript error in IE8. Just go to the Smallipop demo page in IE9 with browser mode and document mode set to IE8 from the IE developer toolbar and click on any blank space on the page and the error will occur.

Smallipop is great!

Craig

lastTrigger.data(...) is undefined

Hi

I have a dynamic ul list that I put items into ... Im using it as a taskbar for minimized "windows". After an item is added to the ul list ... I call smallipop again to initialise any .smallipop classes that is new now in the ul list ... all working as expected.

When I click on one of these "minimized" items to restore that "window", I unbind and remove this item from the DOM ...

$item.closest("li").unbind().remove();

($item being the actual a tag with the title and class for smallipop)

and that's when ı get this error in firebug (attached is IE8 and Firefox firebug log)

Large Tooltip displays off screen

Hi, just found this plugin and its great. however if i load a large image into a tooltip that is triggered at the bottom of the page or window, the tooltip displays below the page or window border. can it be repositioned to fit onscreen?

Not compatible with jQuery 3.0.0

I receive the following alert:

JQMIGRATE: jQuery.fn.bind() is deprecated

Display multiple tour items at once

What i wanted to use this for was to highlight multiple tour items at once that aren't next to each other in the code, so i cant span around them. So basically i want it to highlight multiple text boxes or check boxes, etc. across a page with only one pop up.

Example "There are cases when the trigger is replaced or changed when clicked and the tooltip needs to be hidden" does not work correctly

The tooltip should go away when clicking the link

After calling destroy on initialized object it is not possible to initialize again.

Repro steps:

1. $.smallipop({}, 'something');
2. $.smallipop('destroy');
3. $.smallipop({}, 'something else');
   Expected: hovering over element show smallipop
   Actual: nothing happens.

Root cause: destroy doesn't clean up its classes smallipop-initialized and smallipop from element.
When removed manually it's bac to normal

Add GWT support

It would be nice to use this lib from GWT, instead of jquery.

tour popup doesn't relocate when trigger position changes

I'm using smallipop (super job btw) on a form wizard. When the user reaches a particular step in the "tour" I'm dynamically expanding a section of the page to show more details of the form. The problem is that the tour trigger changes position on the page when I expand the form, thus causing the smallipop popup to display at the old position for the trigger, not the new position.

I didn't see anywhere in the specs where I could call a "refresh" or "redraw" to get the currently displayed popup to update its position.

If there's a workaround you can suggest that'd be great but possibly implementing a "redraw" method would work?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of Sebobo/jquery.smallipop!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library Sebobo/jquery.smallipop is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "Sebobo/jquery.smallipop",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!