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:
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".
şi acesta:
Ne vom ajuta de tagul "script" pentru a insera codurile jQuery ce trebuie mai întâi să fie urcate pe un host.
exemplu:
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:
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:
Mult noroc!
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
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!