enyo/opentip

Opentip is an open source javascript tooltip based on the protoype framework.

Opentip

Opentip is a free opensource Java-Script tooltip class.

Features

It supports:

• Stems (little pointers)
• Automatic content download with AJAX
• Different styles
• Automatic repositioning of the tooltip if it's not in the viewport of the browser anymore
• All kind of triggers (The tooltip can be triggered by mouse over, click, form submit,... everything you can think of really)
• CSS3 Animations
• Well tested, with over 200 unit tests

As of Version 2.0 Opentip does no longer depend on Prototype. You can choose any adapter you want so you can work with the framework of your choice.

Supported frameworks are:

• Native. You can use this one if you don't use any framework.
• Ender
• Component
• jQuery
• Prototype

If you want to contribute, please read on in the contribute file. If you are migrating from version 1.x please refer to the migration section

Build status

Master

Develop

Installation

jQuery, Prototype, Native

Just download lib/opentip.js and lib/adapter.FRAMEWORK.js and include them in this order. You can also take the already minified and combined files in the downloads/ folder.

Component

The easiest and recommended way to install opentip is with component. Just add enyo/opentip as dependency in your component.json and rebuild it.

Simply requiring opentip then activates the tooltips: require "opentip";

Ender

If you prefer ender as package manager just install it like this:

$ ender build opentip

Bower

Another package manager supported is bower:

$ bower install opentip

---

You should include opentip's CSS as well. It's in css/opentip.css. (Except for component of course which automatically bundles the css.)

---

If you want to work it with <=IE8, you have to include excanvas as well. Please refer to the installation guide.

Usage

Version 2.4.6

With HTML data attributes:

<div data-ot="Tooltip content" data-ot-show-on="click">Click me</div>

or with the Javascript API:

$('elementId').opentip('Content', { showOn: "click", ...options... });

For the complete documentation please visit www.opentip.org.

Future plans

• Become library independant. I'm currently working on extracting all prototype functionality, so I can switch library easily. The next library I'll support will be jquery, and then mootools.

• Add more skins.

• Add cooler loading animation.

• Implement unit tests.

If you have ideas, please contact me!

Contribute

Please refer to the CONTRIBUTING readme.

Migrating from Opentip 1.x to 2.x

Those are the major changes you should look out for when migrating from 1.x to 2.x:

• There's no Tip or Tips object anymore. Everything is done through Opentip

• The recommend way to create opentips now is to call new Opentip(element, content, title, options), or with the framework of your choice (eg, ender: $("#my-div").opentip(content, title options))

• The instantiation of new tips inside an event (eg: onclick, onmouseover) is no longer supported! This would create new opentips everytime the event is fired.

• Opentip.debugging = true; does no longer exist. Use Opentip.debug = true;

• Positions are no longer of the weird form [ "left", "top" ] but simply strings like "top left" or "right"

• stem.size has been dropped in favor of stem.length and stem.base

• Most of the design is now done in JS since the whole thing is a canvas now.

• The way close buttons are defined has completely changed. Please refer to the docs for more information.

Tagging

Tagging in this project is done with my tag script.

Authors

Opentip is written by Matias Meno.
Original graphics by Tjandra Mayerhold.

Contributors

Thanks to the following people for providing bug reports, feature requests and fixes:

• Torsten Saam
• Aaron Peckham
• Oguri
• MaxKirillov
• Nick Daugherty

If I forgot somebody, please just tell me.

Related projects

You might also be interested in my formwatcher or dropzone.

License

(The MIT License)

Copyright (c) 2012 Matias Meno <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

opentip's Issues

Tooltips sometimes being placed at 0, 0 instead of actual element

Me again :)
So my code just loops over the rows in my view and create tooltips for each. With each refresh I get a different few rows whose tooltips get displayed at [0, 0] (actually [12, 12], but might have something to do with the fact I have offset = [5, 5]).

It's a different row each time, making it seem random. I'm printing to the console whenever I create the tooltip, to make sure that the element is indeed already in the DOM before creating the tooltip, and they all are. What am I doing wrong?

width not adjusting. getting max 300px

Hi. I'm using the native.min script and HTML attributes but I get a wide tooltip with lots of empty space. Think its making it the max-width of 300px i see in the css. Any ideas?

div style="width:44px;" data-ot="testr" data-ot-style="dark" data-ot-target="true" data-ot-tip-joint="top" data-ot-target-joint="bottom" data-ot-contain-in-viewport="false" data-ot-delay="0"...an image.../div

Question: Callbacks

Hello,

I have been looking for information on call backs. I have a project that requires a callback for when a tool tip is open or closed. I took a look at the open tooltip website and took a quick look at the code but I did not see anything that looked like a callback that could be captured.

I would need to be able to capture events on both dynamically created tooltips and programmatically created tool tips.

If you are not currently using any type of call back for these events, could the current library be easily extended? The open tip site mentions an array that keeps track of opentips associated with an element, do you think this array would be a good candidate for extending so callbacks could be captured for open/close events?

All of my 'tips' are not populating

Hello,

Opentip is great, thanks for all the hard work on it!

I have an issue where all of my tool tips are not populating.

Website is here: http://info.automationdirect.com/education/PeachPits/index.html

Each of the small white boxes should have a tooltip... but there are always a few that do not load (it seems random as to which ones do not populate). The text is coming from an XML file, here is the javascript being used to populate the tips:

for (var i=1;i<=TeamElements.length;i++){
        ...
        //add the tool tips
        detailsPit[i] = document.getElementById('pit'+pitNum[i]);
        tooltipContent[i] = teamName[i] +" <br/><br/>"+teamLocale[i];
        myTip[i] = new Opentip(detailsPit[i], tooltipContent[i], teamNickname[i], { style: 'standard', group: 'container', target: true });
    }

Perhaps I'm doing something stupid (or simply a bad practice) here?

Thanks,

Chip

Possible Prototype Adapter Error?

I'm using the prototype adapter and am getting this JS error at line 129 or opentip.js:

Uncaught TypeError: Cannot read property 'length' of undefined

options.hideTriggers is null instead of the default empty array. I tried setting it explicitly in my options but I still get the error. It looks like the culprit may be the previous call to the extend method in the prototype adapter:

options = (_ref = this.adapter).extend.apply(_ref, [{}].concat(__slice.call(optionSources)));

Let me know if you need more info. Thanks!

Tooltip is hidden behind a window

Hi
I am trying to use opentip in my project. It works fine in the base window of the form, however if I use it on elements placed in a windows that I open in my js code, the tooltip text displays behind the "popup" window, I have tried to set the z-index in opentip.css to 2147483647 but it stills show the tooltip text behind the window.

thx for your help

Torben

New hide trigger: click outside the tip

Would be a nice add-on to add clicking outside of the tooltip as a hide trigger.

hideOn click doesn't work on part of the div

I have a small div (23px by 22px), with a background image, that I'm using as a help icon for users to get inline help within a page. I'm using showOn=click and hideOn=click. The showOn=click works fine if I click anywhere inside the div. Once a tip is showing though, I can only click on half of the div to make it go away. It takes a while to figure out why the tip isn't going away, so makes for a bad user experience. Any idea why this is happening?

Here are the relevant portions of my code:

tip = new Opentip($("#help-" + attributeId), {  target: true, 
                                                tipJoint: "bottom right", 
                                                targetJoint: "left", 
                                                group: "group-help", 
                                                showOn: "click", 
                                                hideOn: "click" });
tip.setContent(helpDescription);

div class='help table_help' id='help-' + attributeId (sorry can't show the "<" ">", these are created and injected into the DOM)

.help{float:right; width:23px; height:22px; background-image:url(images/help.png);}

Implement groups again

Issue while minifying the opentip.js file

Hi,

I had an issue while trying to minify opentip.js using the Yui Compressor. I tracked it down with the help of the Yui Compressor maintainer to the use of the reserved keyword "char" in the dasherize method.

I was wondering if you could change the method dasherize from this:

Opentip::dasherize = (string) ->
  string.replace /([A-Z])/g, (_, char) -> "-#{char.toLowerCase()}"

To this:

Opentip::dasherize = (string) ->
  string.replace /([A-Z])/g, (_, character) -> "-#{character.toLowerCase()}"

Only "char" was renamed.

Thanks!

Write better tests for `adapter.wrap()` and `adapter.unwrap()`

Also... clarify what exactly those functions HAVE to do.

data-ot-show-on='[ "click", "mouseover" ]' doesn't work.

data-ot-show-on='[ "click" ]' doesnt work too,
data-ot-show-on="click" work,
arrays with other options work.

Only opentips that are not fixed should have pointer-events: none

I should add a class to the opentip-container settings fixed if the tooltip is fixed. In which case the CSS can toggle it.

Abort hiding when hovering a potential hide trigger

When there are multiple hide triggers, the hiding should be canceled if the mouse enters an element that has a hide trigger, and if the trigger was initiated by mouseover or mouseout.

Version # in the header of the minified JS?

Would it be possible to include Opentip.version in the header section of the minified JS?

Thanks.

CSS conflict with HTML5 Boilerplate front-end template

I am developing a webpage that uses HTML5 Boilerplate as a front-end template. Recently I received a request from the client to include some fancy tooltips on my web page, so I googled a bit and chose Opentip as a fitting js tooltip framework.

The problem is that !important switch from HTML5BP .hidden class:

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

messes up Opentip tooltips (tested on Ubuntu 12.04.1 with Chromium 24.0.1312.56 and Firefox 19.0):

tooltips displaying properly

tooltips displaying incorrectly (HTML5BP .hidden class added to CSS)

Can you/will you fix it somehow?

Make sure `fixed: true` actually works as intended.

http://stackoverflow.com/questions/13309622/manually-position-an-opentip-tooltip-in-combination-with-kinetic-js

Opentip does not update the fresh content via function

I using a function to call the Opentip via javascript the function is called when a required field of a form via submit is empty, then the function is called to show the right content for the right field.

the problem I am having is that the content is not updating correctly, the problem itself is that the first content "the field cannot be empty" is showing right but when the field is not a valid email the second message instead of showing "the entered email is not a valid email address" is not showing but it is still showing the "the field cannot be empty" instead of "the entered email is not a valid email address".

I think is that the tooltip is not updating the new content but showing the previous content instead all the time.

Is there a way to show the fresh content all the time? I have not found a solution yet so I think this is an issue!!

I will appreciate your reply and solution! thanks

Add Opentip object API doc

Things like .hide() .show() .setContent() etc...

hideOn not working

I am trying to show the tooltip on mouseover, and hide it on mouseout.

The tooltip shows fine, but never hides.

I am using coffeescript, and have tried this on latest Firefox, Safari and Chrome versions.

myInput = $(".alert")
inputOpentip = new Opentip(myInput,
    title: "Title!!!",
    showOn: "mouseover",
    target: true,
    hideTriggers: ["tip", "trigger", "target"],
    hideOn: "mouseout"
)

Am I missing something here ?

Canvas arrow

Hi,

Where is the part of code which is responsible for canvas arrow? I need to adjust it to my needs.

IE8 not working

1.2.7 and 1.2.9 not working in IE 8

Add ability to customize error message

Currently when tooltip content cannot be retrieved using AJAX there is the following message displayed: "There was a problem downloading the content".

This message is hardcoded as of version 2.2.5. It would be nice to be able to customize this message in options so that it can be localized.

`data-ot-tipJoint` and `data-ot-targetJoint` not being recognized

<i data-ot="Upload directly to this course" data-ot-target="true" data-ot-tipjoint="top center" data-ot-targetjoint="bottom center" class="icon-upload"></i>

I realize you warn users not to abuse html attribute configuration, and I will likely be able to solve this by moving to js configuration.

Multiple tooltips clashing with one another

I have a table with a tooltip for each row, on hover. I noticed that on some cases I have to hover on specific parts of the row to get the tooltip to show. Digging further, I saw that plugin placed a tooltip div on top of the rows, hidden, and that div was catching the hover events and so the tooltips weren't being displayed.

Is there a way to make the library place tooltips in the DOM only on hover, and remove them once they are hidden?

Hideon as Table

Hi
it seems that
, hideOn: ['mouseleave','click']
does not work properly, I can can get each of the event to work but I want the hide the, tootltip on both events (the first in the array works) , or am I doing anything wrong ?

thx

Torben

Issue to format/wrap properly long text into a Tooltip popup.

Hi All,

I would ask how works the algorithm which is in charge to display properly long text. In fact, I'm experiencing some issue with 'strange' file names. Those file names are programmatically used as text for a tooltip. See the screenshot for more detail.

Thanks for the support and overall the GREAT job done behind this plugin and dropzonejs!

Kind Regards,
Simone

Adapter for Prototype does not work

Adapter for Prototype refers to jQuery on line 180

How can I trigger opentip to recalculate the size of the tooltip?

I'm pulling in a form template via ajax; the template contains three separate forms that can be switched between using a nav pillbox at the top of the tooltip to show/hide the active form.

I need to trigger opentip to resize the tooltip when the pillbox nav options are clicked, because the forms are of various sizes.

Is there a function I can execute to trigger the visible tooltip's canvas to recalculate its width/height to contain the visible markup?

Tips never get created on IE < 9, if user adds them inside a window load listener

On IE less than 9, if the user sets up tips inside his own window load listener, the tips never get setup. The reason for this is fairly complicated, but comes down to 2 things:

• Prototype doesn't check if the event has already happened when listeners are registered...so if the window has already been loaded and a second listener is registered, the second one will never fire.
• On IE < 9, registered events can occur in any order (usually in the reverse that they do on IE 9 and other browsers).

If the user has an onload listener that configures tips, it can be fired before the Opentip listener (about line 255) that sets Opentip.documentLoaded. If that's the case, the code block around line 92 is executed, but due to the first problem above, that second window load listener never fires, so the tip never gets created.

I'll submit a pull request with a fix shortly.

Prefix all classes with ot-

#34

Toottip Behind Window

Not sure if I am suppose to create a new issue as you have closed the first I wrote before I was able to test it.

I tried to set the Zindex as suggested but still the tooltip goes behind the window, I also tried to create the opentip object after the windows has been opened also with the same result. I have created a generic example with the Kendo UI widget library I uses to create the popup window, but cannot see any possibility to upload the example files here ?
But here is my JS code:
$(document).ready(function () {
var window = $("#eventWindow");
window.kendoWindow({
width: "300px",
height: "315px",
title: "Tooltip always goes behind",
actions: ["Refresh", "Maximize", "Close"],
visible: false,
});
window.bind("activate", openeventwindow);
function openeventwindow(args) {
var myOpentip = new Opentip($("#message"));
myOpentip.lastZIndex = 100000;
myOpentip.setContent("New Tootip contents always goes behinf the window");
}
$("#Buttontest").bind('click', function() {
window.data("kendoWindow").open();
});
});

Question on hide behaviour

Hi,
Is it currently possible to hide the tip on mouseout unless the cursor goes over the tooltip? In other words, keep the tooltip open if the user mouseovers from the trigger to the tooltip.

EDIT: I have tried with setting hideTrigger:'tip' and hideOn:'mouseout' but the tip still disappears when I mouseout of the trigger it seems...

Cheers,
Nicolas

Tooltips disappear

When using a group and a hideTrigger of 'tip' or 'closeButton', I notice that sometimes the tips disappear and do not come back. The 'visible' flag gets stuck to true.

My method of recreation is unscientific... create a bunch of tips on a page, on buttons or images lined up together, move the mouse rapidly across them from one to another and back until one or more disappear.

Opentip does not save DOM modification between openings

When DOM inside a tooltip is modified the change is not saved and disappears when the tooltip is opened again. This is a big drawback when creating an interactive tooltip. Is there any way to work around?

Anyway, thanks for creating and sharing this really nice library!

HTML element inside tooltips?

Is it possible to show any HTML elements like links, forms, videos, images in the tooltips area?

Ability to keep tooltip open if cursor is on tooltip itself

I'm not a developer so please excuse my ignorance.

I'd like to know if a problem can be overcome please.

At the moment, I have an icon, which if I mouse over, the tooltip shows. If I move the cursor away from the icon, the tooltip fades away.

If I move the cursor on to the tooltip itself, so away from the icon and on to the tooltip, the tooltip disappears.

The reason I want the tooltip to stay if my cursor remains on the tooltip is so that I can click on a hyperlink within the tooltip, or perhaps even copy the tooltip text. But I do want the tooltip to auto disappear after my is moved away from the icon or the tooltip on display, rather than having to manually click to close.

Can you please tell me if what I am trying to achieve is possible, and if so what needs to be changed ?

Many thanks.

does hide() also destroy?

If the tool tip is created programmatically, and shown on create and then hidden on keydown, will the tool tip also be destroyed automatically when hidden?

I am using Opentip for form validation so when an error is detected, new Opentip() is called and then when the user starts to type, the tool tip hides.

This one page has many form fields in many tab groups. The browser stays at one url for hours. Tabs and html windows ajax dynamic content as needed.

Guess the point is "new Opentip()" might be called hundreds of times so unless these are getting destroyed or there is a better way to show the tool tip, this might present a memory leak.

Do i need to worry about this or does Opentip handle it?

Viewport containment doesn't work for fixed tooltips

It seems like when fixed: true is being passed to the tooltip, the code that makes sure the tooltip is displayed within the viewport isn't run?
I'd love to get a quick workaround for that (I need fixed: true to allow the user to select text from the tooltip itself, which isn't possible when the tooltip keeps running away)

Add a test that adapter.create returns native DOM elements

Tooltips that automatically reposition with their elements

This is actually two feature requests, but I figured since they were related I'd list them here.

I have a tooltip that is associated with a form element. The thing is, the form element is centered in the browser. That means when the user resizes the browser, the tooltip doesn't move. I solved this by doing the following:

$(window).resize(function () {
$(".opentip-container").reposition();
});

It would be nice if this could be built into the library since I think it's a pretty common scenario.

Also, when using reposition() I noticed that the tooltip lag-slides into place. I want it to remain fixed with the element as the element moves in the window.

Use of classList and

I've noticed that the opentip-native-excanvas.js used classList. This causes huge IE issues 7/8/9. It also uses addEventListener.

Why do you say the plugin works for all browsers from IE7+ if this is the case?

Workaround for classList...

https://github.com/eligrey/classList.js

Workaround for addEventListener...

if (!this.unwrap(t).addEventListener)
return this.unwrap(t).attachEvent(e,i);
else
return this.unwrap(t).addEventListener(e,i,!1);

Opentip on disabled form element

Hi Matias!

I noticed that if you attach an opentip to a form element (in my case a radio button), the tip stops showing if you disable that element. In my case I would like to pop up an explanation to the user for why the radio button is disabled. Is this a possible change?

Cheers and thanks for a very useful library
-- christer

Tooltips on scrollable elements aren't positioned correctly

I simply created a few tooltips on elements that are inside a div that is scrollable. The tooltips are positioned according to where the elements are "statically", and not where they are when the tooltip should be displayed. This is when the tooltip is fixed and has the target set as the element (so it won't be positioned relative to the cursor).

It can be shown in this fiddle. Just hover over the yellow lines after scrolling a bit. Is this simply not supported or am I missing something basic in making this work?

Thanks

It should be possible to use arrays in html data-ot-* attributes.

data-ot-hide-triggers='[ "closeButton", "trigger" ]' - I want to hide tooltip on close or trigger element.

On Chrome tooltip cycles

On chrome the tooltip cycles endlessly if the mouse is inside the target but close to the stem.

Repro:
Using Chrome 23.0.1271.97 m, go to http://www.opentip.org/. Hover over the box "styles" and move your mouse to the right border of the box, about 1 or 2 pixels away from the border but still inside the box, vertically in the center of the box's height (i.e. put the mouse close to the red tooltip's stem).

Observe:
The tooltip keep appearing and disappearing endlessly.

Expect:
The tooltip should stay as the mouse is inside the box.

When using relatively small targets this happens often and is confusing for the user.

OpenTip ajax option

Hi,

I want to use OpenTip project in my program,
but I encountered in a problem:

On the new OpenTip() command' when I set the ajax option to 'true', instead of present the text I have on the URL, it sais that: "There was a problem downloading the content".

Maybe I doing it wrong.
Can you please give me an example of how it supposed to be written?
Or any other help?

Thanks & Regards,
Nuriel

Add a FAQ section to website

AjaxCache property

Hi,

I'm trying to use the attribute ajaxCahce but it seems to doesn't work fine. I've tried this

data-ot-ajaxCache="false"

but the conent of the tool tip is downloaded just once.

Such suggestion ?

thanks

Marco

ajax response processing

I want to use openTip in conjunction with Ajax. My ajax call returns a JSON object that I format on the client. I see in the code that the ajax call directly sets the content in the opentip popup (line 1195):
onSuccess: function(responseText) {
//….
return _this.setContent(responseText);

What I want would be more like
onSuccess: function(responseText) {
//….
return _this.setContent(myCallBackFunction(responseText));

Also, I’d want to pass other parameters to the Ajax call.

Are those possible?