Permalink
Browse files

more work on tips

  • Loading branch information...
1 parent 14f4682 commit 3ccf0cc4ccb05e5842b6b902c5aa4c8d7c265bd4 @shprink committed Jun 16, 2012
Showing with 56 additions and 25 deletions.
  1. +20 −3 Demo/Mercor.Tip.html
  2. +7 −2 Source/CSS/Mercor.Tip.css
  3. +29 −20 Source/UI/Mercor.Tip.js
View
@@ -19,7 +19,24 @@
<script type="text/javascript">
window.addEvent('domready',function(){
var test = new Mercor.Tip($('test'),{
- html:'test'
+ position: 'above',
+ html:'above'
+ });
+ test.show();
+ var test = new Mercor.Tip($('test2'),{
+ position: 'left',
+ html:'left'
+ });
+ test.show();
+ var test = new Mercor.Tip($('test3'),{
+ position: 'right',
+ html:'right'
+ });
+ test.show();
+ var test = new Mercor.Tip($('test4'),{
+ position: 'below',
+ html:'below',
+ sticky: true
});
test.show();
});
@@ -36,9 +53,9 @@
<div class="span4">
<h3></h3>
<p></p>
- <div id='test3' class="tooltip-demo well">
+ <div class="tooltip-demo well">
<p class="muted">
- Tight pants next level keffiyeh <a id='test' rel="tooltip" href="#" data-original-title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a rel="tooltip" href="#" data-original-title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a rel="tooltip" href="#" data-original-title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a rel="tooltip" href="#" data-original-title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
+ Tight pants next level keffiyeh <a id='test' rel="tooltip" href="#" data-original-title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a rel="tooltip" id='test2' href="#" data-original-title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a rel="tooltip" id='test3' href="#" data-original-title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a rel="tooltip" id='test4' href="#" data-original-title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
</div>
</div>
@@ -39,12 +39,17 @@ SOFTWARE.
@CHARSET "UTF-8";
.mercor-element.mercor-tip .mercor-body {
- padding: 2px 18px 2px 5px;
+ padding: 2px 5px;
+ text-align: center;
+}
+
+.mercor-element.mercor-tip.mercor-tip-sticky .mercor-body {
+ padding: 2px 18px;
text-align: center;
}
.mercor-element.mercor-tip {
- max-width: 300px;
+ max-width: 200px;
}
.mercor-element.mercor-tip .mercor-close {
View
@@ -50,7 +50,7 @@ Mercor.Tip = new Class({
position : 'above', // left, right, above, below
sticky : false,
'html' : 'Empty',
- offset: {x:0, y:0},
+ offset: null, // {x:0, y:0}
node : {
element : 'div',
id : 'mercor-tip-container',
@@ -69,6 +69,13 @@ Mercor.Tip = new Class({
initialize : function(element, options) {
this.parent(options);
this.element = element;
+
+ // define basic position
+ this.position = new Hash();
+ this.position.set('above', {position: {x: 'center', y: 'top'}, edge: {x: 'center', y: 'bottom'}, offset: {x:0, y:-5}});
+ this.position.set('below', {position: {x: 'center', y: 'bottom'}, edge: {x: 'center', y: 'top'}, offset: {x:0, y:5}});
+ this.position.set('left', {position: {x: 'left', y: 'center'}, edge: {x: 'right', y: 'center'}, offset: {x:-10, y:0}});
+ this.position.set('right', {position: {x: 'right', y: 'center'}, edge: {x: 'left', y: 'center'}, offset: {x:10, y:0}});
},
_fadeIn : function() {
@@ -78,40 +85,42 @@ Mercor.Tip = new Class({
_fadeOut : function() {
this.fade.start(this.options.fade.stop);
},
-
+
_setupNode: function(){
+ this.node.setStyles(this.options.node.styles);
this.node.addClass('arrow-' + this.options.position);
-
+ if (this.options.sticky)
+ {
+ this.node.addClass('mercor-tip-sticky');
+ }
+ else
+ {
+ this.template.get('close').destroy();
+ }
},
-
+
_attach: function(){
},
_detach: function(){
},
-
- show : function() {
- this._setupNode();
- this._load();
- this._injectNode();
-
- // define basic position
- this.position = new Hash();
- this.position.set('above', {position: {x: 'center', y: 'top'}, edge: {x: 'center', y: 'bottom'}});
- this.position.set('below', {position: {x: 'center', y: 'bottom'}, edge: {x: 'center', y: 'top'}});
- this.position.set('left', {position: {x: 'center', y: 'left'}, edge: {x: 'center', y: 'right'}});
- this.position.set('right', {position: {x: 'center', y: 'right'}, edge: {x: 'center', y: 'left'}});
-
- this.node.setStyle('width', 300);
- // set position
+
+ _setPosition: function(){
this.node.position({
relativeTo: this.element,
position: this.position.get(this.options.position).position,
edge: this.position.get(this.options.position).edge,
- offset: this.options.offset
+ offset: (this.options.offset)? this.options.offset : this.position.get(this.options.position).offset
});
+ },
+
+ show : function() {
+ this._setupNode();
+ this._load();
+ this._injectNode();
+ this._setPosition();
this.fireEvent('show');
},

0 comments on commit 3ccf0cc

Please sign in to comment.