TooL Tip TuToRiaL

Ce este un tooltip?

Un tooltip reprezintă un şablon suprapus ce apare când pui cursorul peste (hover) o imagine / text, conţinând o descriere încadrată înăuntrul acestuia.
Vezi demo: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]


Cum îl pot utiliza?

HTML:

Adăugăm class="with-tooltip" imaginii / linkului dorit.
Vom folosi opţiunea "title" pentru a personaliza descrierea încadrată în şablonul tooltip.

exemplu:

Cod:

<a href="#" title="Acesta e un tooltip !" class="with-tooltip">Mută cursorul peste mine</a>

jQuery:

Pentru a funcţiona trebuie să folosim 2 fişiere jQuery.
Vom crea fişierele jQuery inroducand următorul cod într-un editor text (notepad e perfect) pe urmă le veţi salva cu extensia ".js".

Cod:

/**
*
*  simpleTooltip jQuery plugin, by Marius ILIE
*  visit http://dev.mariusilie.net for details
*
**/
(function($){ $.fn.simpletooltip = function(){
  return this.each(function() {
      var text = $(this).attr("title");
      $(this).attr("title", "");
      if(text != undefined) {
        $(this).hover(function(e){
            var tipX = e.pageX + 12;
            var tipY = e.pageY + 12;
            $(this).attr("title", "");
            $("body").append("<div id='simpleTooltip' style='position: absolute; z-index: 100; display: none;'>" + text + "</div>");
            if($.browser.msie) var tipWidth = $("#simpleTooltip").outerWidth(true)
            else var tipWidth = $("#simpleTooltip").width()
            $("#simpleTooltip").width(tipWidth);
            $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
        }, function(){
            $("#simpleTooltip").remove();
            $(this).attr("title", text);
        });
        $(this).mousemove(function(e){
            var tipX = e.pageX + 12;
            var tipY = e.pageY + 12;
            var tipWidth = $("#simpleTooltip").outerWidth(true);
            var tipHeight = $("#simpleTooltip").outerHeight(true);
            if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
            if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
            $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
        });
      }
  });
}})(jQuery);


şi acesta:

Cod:

$(document).ready(function(){
  $(".with-tooltip").simpletooltip();
});

Ne vom ajuta de tagul "script" pentru a insera codurile jQuery ce trebuie mai întâi să fie urcate pe un host.

exemplu:

Cod:

<script type="text/javascript" src="http://netcustoms.webs.com/jquery.tooltip.v.1.1.js"></script>

Cod:

<script type="text/javascript" src="http://netcustoms.webs.com/jquery.tooltip.execute.js"></script>

CSS:

Vom avea nevoie şi de un cod CSS pentru a personaliza şablonul.
Dacă ştiţi CSS îl puteţi personaliza după bunul plac.
Adăugaţi codul următor pe pagină între tagul sau în foaia de stil CSS.

exemplu:

Cod:

#simpleTooltip { padding: 7px; border: 1px solid #A6A7AB; background: #F2F3F5; }

NOTAŢIE:

În cazul în care folosiţi tooltip într-o pagină HTML separată de forum va trebui să adăugaţi şi următorul cod:

Cod:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


Mult noroc!