enyo / opentip Goto Github PK
View Code? Open in Web Editor NEWOpentip is an open source javascript tooltip based on the protoype framework.
Home Page: http://www.opentip.org
Opentip is an open source javascript tooltip based on the protoype framework.
Home Page: http://www.opentip.org
I should add a class to the opentip-container
settings fixed
if the tooltip is fixed. In which case the CSS can toggle it.
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:
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.
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?
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
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 ?
Is it possible to show any HTML elements like links, forms, videos, images in the tooltips area?
data-ot-hide-triggers='[ "closeButton", "trigger" ]' - I want to hide tooltip on close or trigger element.
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
data-ot-show-on='[ "click" ]' doesnt work too,
data-ot-show-on="click" work,
arrays with other options work.
1.2.7 and 1.2.9 not working in IE 8
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)
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.
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!
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?
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.
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.
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
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
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.
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.
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
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!
Adapter for Prototype refers to jQuery on line 180
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
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
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 incorrectly (HTML5BP .hidden
class added to CSS)
Can you/will you fix it somehow?
Things like .hide() .show() .setContent() etc...
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?
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?
Also... clarify what exactly those functions HAVE to do.
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?
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
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?
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();
});
});
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.
Would it be possible to include Opentip.version in the header section of the minified JS?
Thanks.
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
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!
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
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
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);}
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);
Would be a nice add-on to add clicking outside of the tooltip as a hide trigger.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.