tooltip

[debreli]

stylesheet/stylesheet.css aç dosyanın sonuna ekle

.hover{ position:absolute;display:none;z-index:999; width:245px; height:108px; background:url('../image/tooltip.png') no-repeat;}

featured.php dosyasını aç

en son div den sonra ekle

<script type="text/javascript">
   $(document).ready(function() {
    $('.container').hover(function() {
        if ($('.hover', this).css('display') == 'block') { return false; }
        os = $(this).offset();
        $('.hover', this).css({top: os.top+'px', left: os.left+-20+'px'}).animate({top: os.top-100+'px', opacity: 'show'}, 750);
    },
    function() {
        os = $(this).offset();
        $('.hover', this).animate({top: os.top+'px', opacity: 'hide'}, 500);
    });
});
    </script>

os.left+-20+'px' "-20" sağa veya sola kaydırma
os.top-100+'px', yukarı aşağıya kaydırma

aynı dosyada bul

<?php foreach ($products as $product) { ?>
      <div>

sonrasına ekle

<div class="container">
  <div class="hover">test</div>
        <?php if ($product['thumb']) { ?>
        <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
        <?php } ?></div>

test yazan kısma kodlarınızı yerleştirebilirsiniz.

css ile değişik resim ve boyutlandırma yapabilirsiniz

 

[alkanzaXn]

Paylaşmayı yeniden hatırlattığın için samimi teşekkürler.

.

 

[nokta]

Güzel sunumun için çok teşekkürler arkadaşım.
Emeğine sağlık.

 

[By_Surmeneli]

Paylaşm için teşekkürler bir sorum olacak o tooltipin içerisine ürünün adıyla sol tarafına resmini koymak istedim ama böyle bir bozukluk oldu

kullandığım kod

<div class="hover"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /><?php echo $product['name']; ?></div>