PowerTip – Çok Kullanışlı Bir jQuery Tooltip Eklentisi
Steven Benner tarafından hazırlanmış olan bir jQuery Tooltip eklentisi. Bezner toltip eklentilerine göre çok daha fazla gelişmiş özellikleri bulunan PowerTip eklentisi, sayfa içerisindeki nesnelere 360º istediğiniz bölümde tooltip belirebilmesini sağlayabiliyorsunuz. Ayrıca belirlediğiniz bir çerçeve içerisinde tooltip örneğinin mouseyi takip edebilme özelliğide bulunuyor. Hem SVG hemde html nesnelerde kullanılabilen PowerTip eklentisi tooltip ihtiyacı olan herkes için yeteri kadar özelliğe sahip.
Örnek Kullanım :
- Head etiketleri arasına eklenmesi gereken bölümler.
PowerTip demosunda kullanılan bütün eklentiler ve css stil dosyasının url adresleri :
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> <script type="text/javascript" src="../src/core.js"></script> <script type="text/javascript" src="../src/csscoordinates.js"></script> <script type="text/javascript" src="../src/displaycontroller.js"></script> <script type="text/javascript" src="../src/placementcalculator.js"></script> <script type="text/javascript" src="../src/tooltipcontroller.js"></script> <script type="text/javascript" src="../src/utility.js"></script> <link rel="stylesheet" type="text/css" href="../css/jquery.powertip.css" /> |
- Placement Examples
Html :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="placement-examples"> <h2 align="center">Placement examples</h2> <div> <input type="button" class="north-west-alt" value="North West Alt" title="North west alt placement" /> <input type="button" class="north-west" value="North West" title="North west placement" /> <input type="button" class="north" value="North" title="North placement" /> <input type="button" class="north-east" value="North East" title="North east placement" /> <input type="button" class="north-east-alt" value="North East Alt" title="North east alt placement" /><br /> <input type="button" class="west" value="West" title="West placement" /> <input type="button" class="east" value="East" title="East placement" /><br /> <input type="button" class="south-west-alt" value="South West Alt" title="South west alt placement" /> <input type="button" class="south-west" value="South West" title="South west placement" /> <input type="button" class="south" value="South" title="South placement" /> <input type="button" class="south-east" value="South East" title="South east placement" /> <input type="button" class="south-east-alt" value="South East Alt" title="South east alt placement" /> </div> </div> |
JavaScript :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> $(function() { // placement examples $('.north').powerTip({placement: 'n'}); $('.east').powerTip({placement: 'e'}); $('.south').powerTip({placement: 's'}); $('.west').powerTip({placement: 'w'}); $('.north-west').powerTip({placement: 'nw'}); $('.north-east').powerTip({placement: 'ne'}); $('.south-west').powerTip({placement: 'sw'}); $('.south-east').powerTip({placement: 'se'}); $('.north-west-alt').powerTip({placement: 'nw-alt'}); $('.north-east-alt').powerTip({placement: 'ne-alt'}); $('.south-west-alt').powerTip({placement: 'sw-alt'}); $('.south-east-alt').powerTip({placement: 'se-alt'}); }); </script> |
Bunun gibi geri kalan örnekleri örnek dosya içerisinden inceleyebilirsiniz. Eklentinin SVG örneğinede buradan bakabilirsiniz.
Bu yazılar da ilginizi çekebilir :
-
tuncay
-
http://mintik.com/ mintik
Fixed Social Sidebar |: