Permalink
Browse files

Merge commit 'v1.4.3'

  • Loading branch information...
enyo committed Jun 1, 2012
2 parents dcf7da7 + e69ac94 commit 9f60f1f15f336eba53db15df15b03b1bf13bbd3a
Showing with 127 additions and 40 deletions.
  1. +0 −1 .tagconfig
  2. +16 −0 .tagconfig.json
  3. +9 −2 README.md
  4. +42 −32 opentip.js
  5. +37 −0 opentip.min.js
  6. +23 −5 test/index.html
View
@@ -1 +0,0 @@
-files="opentip.js README.md"
View
@@ -0,0 +1,16 @@
+{
+ "files": [
+ {
+ "name": "opentip.js",
+ "regexs": [
+ "Version: '###'"
+ ]
+ },
+ {
+ "name": "README.md",
+ "regexs": [
+ "Opentip Version ###"
+ ]
+ }
+ ]
+}
View
@@ -1,4 +1,4 @@
-# Opentip Version 1.4.2
+# Opentip Version 1.4.3
The [opentip][opentip]-class is a free opensource Java-Script tooltip class based on the [prototype][prototype] framework.
@@ -13,6 +13,11 @@ It supports:
As of Version 1.2.6 Opentip does no longer depend on scriptaculous.
+
+The latest stable version is always in the **master** branch (which always points at the latest version tag).
+
+The latest development version is in the **develop** branch. Use only if you want to contribute or test features.
+
## Usage
<div onmouseover="javascript:Tips.add(this, event, 'Content', { options });"></div>
@@ -60,11 +65,13 @@ Opentip is written by Matias Meno.<br>
All graphics by Tjandra Mayerhold.
### Contributors
-Thanks to the following people for providing bug reports, feature requests and sometimes fixes:
+
+Thanks to the following people for providing bug reports, feature requests and fixes:
- Torsten Saam
- Aaron Peckham
- Oguri
+- MaxKirillov
If I forgot somebody, please just tell me.
View
@@ -44,7 +44,7 @@
*/
var Opentip = {
- Version: '1.4.2',
+ Version: '1.4.3',
REQUIRED_PROTOTYPE_VERSION: '1.6.0',
REQUIRED_SCRIPTACULOUS_VERSION: '1.8.0',
STICKS_OUT_TOP: 1,
@@ -186,8 +186,8 @@ Opentip.styles = {
hideDelay: 0.1, // --
fixed: false, // If target is not null, elements are always fixed.
showOn: 'mouseover', // string (the observe string of the trigger element, eg: click, mouseover, etc..) || 'creation' (the tooltip will show when being created) || null if you want to handle it yourself.
- hideTrigger: 'trigger', // 'trigger' | 'tip' | 'target' | 'closeButton' | ELEMENT | ELEMENT_ID
- hideOn: null, // string (event eg: click) || null (let Opentip decide)
+ hideTrigger: 'trigger', // 'trigger' | 'tip' | 'target' | 'closeButton' | ELEMENT | ELEMENT_ID || array containing any of the previous
+ hideOn: null, // string (event eg: click) || array of event strings if multiple hideTriggers || null (let Opentip decide)
offset: [ 0, 0 ], // COORDINATE
containInViewport: true, // Whether the targetJoint/tipJoint should be changed if the tooltip is not in the viewport anymore.
autoOffset: true, // If set to true, offsets are calculated automatically to position the tooltip. (pixels are added if there are stems for example)
@@ -249,11 +249,11 @@ Event.observe(window, Opentip.IEVersion() ? 'load' : 'dom:loaded', function() {
// Go through all elements, and look for elements that have inline element
// opentip definitions.
- $$('[ot]').each(function(element) {
+ $$('[data-ot]').each(function(element) {
var options = {};
element = $(element);
- var content = element.readAttribute('ot');
+ var content = element.readAttribute('data-ot');
if (content === '' || content === 'true' || content === 'yes') {
content = element.readAttribute('title');
@@ -480,33 +480,43 @@ var TipClass = Class.create({
if (this.options.hideTrigger) {
var hideOnEvent = null;
var hideTriggerElement = null;
- switch (this.options.hideTrigger) {
- case 'trigger':
- hideOnEvent = this.options.hideOn ? this.options.hideOn : 'mouseout';
- hideTriggerElement = this.triggerElement;
- break;
- case 'tip':
- hideOnEvent = this.options.hideOn ? this.options.hideOn : 'mouseover';
- hideTriggerElement = this.container;
- break;
- case 'target':
- hideOnEvent = this.options.hideOn ? this.options.hideOn : 'mouseover';
- hideTriggerElement = this.options.target;
- break;
- case 'closeButton':break;
- default:
- hideOnEvent = this.options.hideOn ? this.options.hideOn : 'mouseover';
- hideTriggerElement = $(this.options.hideTrigger);
- break;
+
+ if (!(this.options.hideTrigger instanceof Array)) {
+ this.options.hideTrigger = [this.options.hideTrigger];
}
- if (hideTriggerElement) {
- this.options.hideTriggerElements.push({element: hideTriggerElement, event: hideOnEvent});
- if (hideOnEvent == 'mouseout') {
- // When the hide trigger is mouseout, we have to attach a mouseover trigger to that element, so the tooltip doesn't disappear when
- // hovering child elements. (Hovering children fires a mouseout mouseover event)
- this.options.showTriggerElementsWhenVisible.push({element: hideTriggerElement, event: 'mouseover'});
+
+ this.options.hideTrigger.each(function(hideTrigger, i) {
+
+ var hideOnOption = (this.options.hideOn instanceof Array) ? this.options.hideOn[i] : this.options.hideOn;
+
+ switch (hideTrigger) {
+ case 'trigger':
+ hideOnEvent = hideOnOption ? hideOnOption : 'mouseout';
+ hideTriggerElement = this.triggerElement;
+ break;
+ case 'tip':
+ hideOnEvent = hideOnOption ? hideOnOption : 'mouseover';
+ hideTriggerElement = this.container;
+ break;
+ case 'target':
+ hideOnEvent = hideOnOption ? hideOnOption : 'mouseover';
+ hideTriggerElement = this.options.target;
+ break;
+ case 'closeButton':break;
+ default:
+ hideOnEvent = hideOnOption ? hideOnOption : 'mouseover';
+ hideTriggerElement = $(hideTrigger);
+ break;
}
- }
+ if (hideTriggerElement) {
+ this.options.hideTriggerElements.push({element: hideTriggerElement, event: hideOnEvent});
+ if (hideOnEvent == 'mouseout') {
+ // When the hide trigger is mouseout, we have to attach a mouseover trigger to that element, so the tooltip doesn't disappear when
+ // hovering child elements. (Hovering children fires a mouseout mouseover event)
+ this.options.showTriggerElementsWhenVisible.push({element: hideTriggerElement, event: 'mouseover'});
+ }
+ }
+ }.bind(this));
}
this.activate();
@@ -568,7 +578,7 @@ var TipClass = Class.create({
var buttons = this.container.appendChild(Opentip.element('div', {className: 'ot-buttons'}));
var drawCloseButton = false;
- if (this.options.hideTrigger == 'closeButton') {
+ if (this.options.hideTrigger && this.options.hideTrigger.include('closeButton')) {
buttons.appendChild(Opentip.element('a', {href: 'javascript:undefined', className: 'close'}, closeButtonCanvas = Opentip.element('canvas', { className: 'canvas' })));
// The canvas has to have a className assigned, because IE < 9 doesn't know the element, and won't assign any css to it.
drawCloseButton = true;
@@ -855,7 +865,7 @@ var TipClass = Class.create({
else if (textarea) textarea.focus();
},
searchAndActivateHideButtons: function() {
- if (this.options.hideTrigger == 'closeButton' || !this.options.hideTrigger) {
+ if (!this.options.hideTrigger || this.options.hideTrigger.include('closeButton')) {
this.options.hideTriggerElements = [];
this.container.select('.close').each(function(el) {
this.options.hideTriggerElements.push({element: el, event: 'click'});
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -447,11 +447,11 @@
<br />
<div class="test">
- <div ot="Hi this is a very simple tooltip.">Just defining ot.</div>
- <div ot="Hi" ot-delay="0.99" ot-style="glass">Delay 0.99, style glass.</div>
- <a href="ajaxtest.html" ot="true" ot-show-on="click" ot-ajax="true" ot-stem="true" ot-tip-joint="[ 'center', 'bottom' ]">Testing AJAX. tip joint: center/bottom</a>
- <div ot="Hi" ot-show-effect="condense" ot-hide-effect="puff">Testing the inline HTML options.</div>
- <div ot="Hi" ot-show-effect-duration="1" ot-hide-effect-duration="1" ot-show-effect="rotate" ot-hide-effect="rotate" ot-fallback-show-effect="appear" ot-fallback-hide-effect="fade">Testing fallback effects. Should appear/fade with CSS3 disabled.</div>
+ <div data-ot="Hi this is a very simple tooltip.">Just defining ot.</div>
+ <div data-ot="Hi" ot-delay="0.99" ot-style="glass">Delay 0.99, style glass.</div>
+ <a href="ajaxtest.html" data-ot="true" ot-show-on="click" ot-ajax="true" ot-stem="true" ot-tip-joint="[ 'center', 'bottom' ]">Testing AJAX. tip joint: center/bottom</a>
+ <div data-ot="Hi" ot-show-effect="condense" ot-hide-effect="puff">Testing the inline HTML options.</div>
+ <div data-ot="Hi" ot-show-effect-duration="1" ot-hide-effect-duration="1" ot-show-effect="rotate" ot-hide-effect="rotate" ot-fallback-show-effect="appear" ot-fallback-hide-effect="fade">Testing fallback effects. Should appear/fade with CSS3 disabled.</div>
</div>
@@ -479,6 +479,24 @@
$('testActivateTooltip').observe('click', function() { tipUpdatingContent.activate(); });
</script>
+ <br />
+ <div class="test" id="mtrigger">
+ Multiple hideTrigger
+ </div>
+
+ <script type="text/javascript">
+ $('mtrigger').addTip('Tooltip disappears when you either click the trigger element or mouseout the tooltip', 'Title', {
+ fixed: true,
+ stem: true,
+ tipJoint: [ 'left', 'middle' ],
+ target: true,
+ hideTrigger: ['tip', 'trigger'],
+ hideDelay: 0.2,
+ hideOn: [ 'mouseout', 'click' ]
+ });
+ </script>
+
+
<br />
<br />

0 comments on commit 9f60f1f

Please sign in to comment.