Motanel Tutorials


 
AcasaAcasa  RegulamentRegulament  FAQFAQ  CautareCautare  MembriMembri  InregistrareInregistrare  ConectareConectare  

Simple Tooltip w/ jQuery & CSS


Navigare :: Javascript/Jquery
AutorMesaj
 Vizitato
avatar
Rang: Vizitator


MesajSubiect: Simple Tooltip w/ jQuery & CSS Joi 3 Feb 2011 - 13:34
Descriere:

Există o mulţime de tutoriale referitoare la tooltip plugin-uri ,dar din pacate multe dintre ele ori nu sunt bine explicate ori sunt in ingleza si nu pot fi intelese de toata lumea,de aceia eu m-am deci sa fac acest tutoria si sa va explic mai amanuntit despre ce este vorba.







Demonstratie:

Demonstratie Click Aici



Instalare:

1. CSS
Adaugati codul urmator in CSS:
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS


Cod:

* {outline: none;}
img {border: none;}
h1 {
   font: 4em normal Georgia, 'Times New Roman', Times, serif;
   padding: 10px 0;
   color: #aaa;
   text-align: center;
}
h1 span { color: #666; }
h1 small{
   font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
   text-transform:uppercase;
   letter-spacing: 0.65em;
   display: block;
   color: #666;
}
h1 a {text-decoration: none;}
a {color: #d60000; text-decoration: none;}

/*--Tooltip Styles--*/
.tip {
   color: #fff;
   background:#1d1d1d;
   display:none; /*--Hides by default--*/
   padding:10px;
   position:absolute;   z-index:1000;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}
.container {width: 960px; margin: 0 auto; overflow: hidden;}




2. jQuery




Cod:


</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip       
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
      
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
       
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
tip.css({  top: mousey, left: mousex });
});
});

</script>
<div class="container">

<a href="LINK FORUM" target="_blank" class="tip_trigger"

 


<center><img src="http://r13.imgfast.net/users/1314/81/15/83/avatars/889-59.png" alt=""/>

<span class="tip"><img src="http://img225.imageshack.us/img225/5245/22934634.png" alt="" /></span>
</a>



</body>
</html>

In caz ca va apar imaginele prea sus puneti dupa codul acesta :
Cod:
<a href="LINK FORUM" target="_blank" class="tip_trigger"

Cod:
<br>
,iar unde scrie LINK FORUM inlocuiti cu adresa forumului vostru.

Iar in loc de imaginea asta: http://r13.imgfast.net/users/1314/81/15/83/avatars/889-59.png si asta http://img225.imageshack.us/img225/5245/22934634.png inlocuiti cu imaginile dorite.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Tutorial realizat deWwW.MotanelTutorials.com" target="_blank"> Emanuel


Ultima editare efectuata de catre Emanuel in Mier 2 Mar 2011 - 3:03, editata de 4 ori
 TaZ
avatar
Rang: Membru - MT™

Respetarea regulilor Utilizator banat

Vezi profilul utilizatorului
MesajSubiect: Re: Simple Tooltip w/ jQuery & CSS Vin 4 Feb 2011 - 0:51
mersi wEdETyKE biggrin Este de ajutor :P
 pXp.n0LimiT
avatar
Rang: Membru - MT™

Respetarea regulilor 50%

Vezi profilul utilizatorului
MesajSubiect: Re: Simple Tooltip w/ jQuery & CSS Vin 4 Feb 2011 - 1:35
foarte frumos dar ... nu arata cum l`a pus andrei pe forum
 Vizitato
avatar
Rang: Vizitator


MesajSubiect: Re: Simple Tooltip w/ jQuery & CSS Vin 4 Feb 2011 - 1:39
ghebaru a scris:
foarte frumos dar ... nu arata cum l`a pus andrei pe forum

Nu Andrei la pus ci eu l-am pus, urmeaza instructiunile si ai sa vezi ca o sa mearga .;)
 ElyoS
avatar
Rang: Membru - MT™

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Re: Simple Tooltip w/ jQuery & CSS Vin 18 Mar 2011 - 6:27
Defapt tu doar ai rescris tutorialul si ai schimbat imaginile.
Am vazut tutorialul pe net..


Vorbeste cu Andrei sa incarce documentul pe hostul lui:
Cod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


Si felicitari pentru tutorial..
 Madara
avatar
Rang: Moderator

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Re: Simple Tooltip w/ jQuery & CSS Vin 15 Apr 2011 - 8:09
MIe unul nu imi merge, unde trebuie sa bag acest cod ?

Cod:
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip     
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
     
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
     
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
tip.css({  top: mousey, left: mousex });
});
});

</script>
<div class="container">

<a href="LINK FORUM" target="_blank" class="tip_trigger"

 


<center><img src="http://r13.imgfast.net/users/1314/81/15/83/avatars/889-59.png" alt=""/>

<span class="tip"><img src="http://img225.imageshack.us/img225/5245/22934634.png" alt="" /></span>
</a>



</body>
</html>
?
 Continut sponsorizat
Rang:


MesajSubiect: Re: Simple Tooltip w/ jQuery & CSS



Copyright © 2013 - Toate drepturile rezervate
Design creat si codat de Alexandru Miron si Stefan Patrascu