»Forumlar »D?k?manlar »Jquery Tooltip (Jquery Title)
  https://seditio.com.tr/eski1/forums.php?m=posts&q=1622
          Geri Dön      -      Sayfayı Yazdırmak için tıklayın
Author: Kaan, Posted: 2011-10-13 00:59 GMT.
Jquery Tooltip (Jquery Title)



Web sistemlerimizde kullan?c?lar?n doldurmas? gereken alanlar? g?rsel a??dan zenginle?tirmek ve klasik title?den kurtulmak i?in g?zel bir ?rnek

Javascript kodu:
:
ava]this.vtip = function() {

    this.xOffset = -10; // x distance from mouse

    this.yOffset = 10; // y distance from mouse      

 

    $(".vtip").unbind().hover(

        function(e) {

            this.t = this.title;

            this.title = '';

            this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);

 

            $('body').append( '<p id="vtip"><img id="vtipArrow" />' + this.t + '</p>' );

 

            $('p#vtip #vtipArrow').attr("src", 'images/vtip_arrow.png');

            $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");

 

        },

        function() {

            this.title = this.t;

            $("p#vtip").fadeOut("slow").remove();

        }

    ).mousemove(

        function(e) {

            this.top = (e.pageY + yOffset);

            this.left = (e.pageX + xOffset);

 

            $("p#vtip").css("top", this.top+"px").css("left", this.left+"px");

        }

    );            

 

};

jQuery(document).ready(function($){vtip();})


Css kodumuz:
:
ss]p#vtip {

    display: none;

    position: absolute;

    padding: 10px;

    left: 5px;

    font-size: 0.8em;

    background-color: white; border: 1px solid #a6c9e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999

}

p#vtip #vtipArrow {

    position: absolute; top: -10px; left: 5px

}

Uygulama sayfam?za jquery k?t?phanemiz, vtip.js mizi ve ve vtip.css i ekledikten sonra uygulanacak nesnenin class ?n? ?vtip? yap?yoruz ve nesnenin title a??klamas?n? giriyoruz bu sayede jquery tooltip ?al??m?? oluyor.

Powered by SeditioPrint version