Hot!Ajax

...because open source matters

 
  • Increase font size
  • Default font size
  • Decrease font size
  • dark
  • light
  • leftlayout
  • rightlayout

tips(mootools)

(25 votes, average: 3.80 out of 5)
Image

/* Tips 1 */

var Tips1 = new Tips($$('.Tips1'));

/* Tips 2 */

var Tips2 = new Tips($$('.Tips2'),

{ initialize:function(){

this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0); },

onShow: function(toolTip) { this.fx.start(1); },

onHide: function(toolTip) { this.fx.start(0); } });

/* Tips 3 */

var Tips3 = new Tips($$('.Tips3'),

{ showDelay: 400, hideDelay: 400, fixed: true });

/* Tips 4 */

var Tips4 = new Tips($$('.Tips4'),

{ className: 'custom' });

<h3>Tips 1</h3> 

<img src="/demos/MousewheelCustom/moo.png" alt="mooCow" class="Tips1"

title="Tips Title :: This is my tip content" />

<h3>Tips 2</h3>

<img src="/demos/MousewheelCustom/moo.png" alt="mooCow" class="Tips2"

title="Tips Title :: This is my tip content" />

<h3>Tips 3</h3>

Fixed tooltip:

<a href="http://www.mootools.net" onclick="return false;" class="Tips3"

title="Mootools official website">Mootools.net</a>

<h3>Tips 4</h3>

Custom className:

<a href="http://www.mootools.net" onclick="return false;" class="Tips4"

title="Mootools official website">Mootools.net</a>
.tool-tip {  	color: #fff;  	width: 139px;  	z-index: 13000;  } 

.tool-title {

font-weight: bold;

font-size: 11px;

margin: 0;

color: #9FD4FF;

padding: 8px 8px 4px;

background: url(bubble.png) top left; }

.tool-text {

font-size: 11px;

padding: 4px 8px 8px;

background: url(bubble.png) bottom right; }

.custom-tip {

color: #000;

idth: 130px;

z-index: 13000;

}

.custom-title

{

fnt-weight: bold;

font-size: 11px;

margin: 0;

color: #3E4F14;

padding: 8px 8px 4px;

background: #C3DF7D;

border-bottom: 1px solid #B5CF74; }

.custom-text {

font-size: 11px;

padding: 4px 8px 8px;

background: #CFDFA7; }

DownLoad:http://www.hotajax.org/download/mootools/Tips.zip


来源:http://demos.mootools.net/Tips/


Comments (1)add comment

Write comment

busy

Newer news items:
Older news items:

 

Sponsors

Copyright

Creative Commons License
Hot!Ajax is licensed under a Creative Commons Attribution 3.0 Unported License.