Joerg Viola

Lean. Web. Development.

JQuery UI Tools - UI Toolkit for Dummies

Interesting in fancy tabs, tooltips or overlays? -

Take a look at JQuery UI Tools

Tooltip

Simply insert the tooltip right after the trigger element:

1
2
3
4
<a class="tip" href="...">Press here</a>
<div class="tooltip">
  This is my tip...
</div>

activate it after page load:

1
2
3
<script type="text/javascript">
  $('.tip').tooltip({ position: "bottom center", predelay: 500, effect: 'fade', fadeInSpeed:1000 });
</script>

and style it in your css (or LESS, if that matters ;-):

1
2
3
4
5
6
7
8
.tooltip {
    display:none;
    width: 250px;
    background:white;
    border: 4px @orange solid;
    padding: 10px 20px;
    color:#000;
}

Overlay

Link the overlay to the trigger element using rel:

1
2
3
4
<a class="pointer" rel="#preview">Press this!</a>
<div id="preview" class="overlay">
  Lightbox-Content goes here...
</div>

activate it:

1
2
3
<script type="text/javascript">
  $('a[rel]').overlay();
</script>

and, again, add some style:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.overlay {
    display:none;
    z-index:10000;
    background-color:#fff;
    border: 4px solid @orange;
    padding: 10px 20px;
}

.overlay .close {
    background-image:url(/assets/images/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}

as well as this close button:

Comments