Herkese Selam,

Bu dersimizde bir div ile nasıl basit bir tooltip yapılacağını göreceğiz.

İlk önce body tagımızın içine  css ile şekillendirebileceğimiz bir div yaratıyoruz.

burda önemli olan div özelliklerine  javascript kodumuzu tetikleyecek  üç event (tetikleyici) yazacağız.

 <div id="NormalDIV" onmousemove="TooltipGoster(event)" onmouseover="TooltipGoster(event)"

        onmouseout="TooltipGizle(event)" style="width: 180px; height: 50px; background-color: #cc0033;

        text-align: center;">

        &nbsp;ToolTip Örneği&nbsp;

    </div>

 Şimdi ise sayfa ilk yüklediğinde visible özelliği hidden ve sonra mouse tetikleyicileri ile görünecek olan div tagımızı oluşturuyoruz. burdaki önemli nokta div in position özelliği absolute olarak belirtimektir.

<div id="gizliDIV" style="position: absolute; background-color: #ffffcc; visibility: hidden;

        border: dimgray thin solid; padding: 1px 7px 1px 7px; margin: 2px 5px;">

        <span style="text-align: center; font-size: 18px; font-family: Calibri; color: #4e4e4e;">

            <p>

                www.vedattaylan.com.tr </p>

        </span>

    </div>

Şimdi son olarak head bölümüne yazacağımız javascript kodlarımıza geldik.

<script language="javascript" type="text/javascript">

        function TooltipGoster(oEvent) {

            //var ile gizliDIV div tagını alıyoruz.

            var oDiv = document.getElementById("gizliDIV");

            oDiv.style.visibility = "visible";

            //mouse imlecimizin en ucunda değilde biraz sağında ve altında çıkması için

            // div tagını mouse imlecinden biraz uzakta tutmak için o andaki

            // x ve y koordinatları değerlerinin 5 fazlasını veriyoruz.

            oDiv.style.left = oEvent.clientX + 5;

            oDiv.style.top = oEvent.clientY + 5;

        }

        function TooltipGizle(oEvent) {

            var oDiv = document.getElementById("gizliDIV");

            oDiv.style.visibility = "hidden";

        }

    </script>

hepsi bu kadar. İsterseniz bunu daha da geliştirebilirsiniz. mesela küçük bir resim göstermek gibi..

Görüşmek üzere.