Mobil Sayfada Tooltip Kullanımı

Web sayfalarında metine veya fotoğraflara ipuçları yani ingilizce adıyla tooltip kullanmak bazen çok işimize yarıyor.

Bir sayfada metin içerisine kullanıcılar için açıklayıcı metinler veya görsel metin olarak ipuçları sunabiliyoruz.

Bu ipuçlarının sayfada çalışması için faremizle açıklama eklemiş olduğumuz metin üzerine gelerek milisaniye içerisinde tooltip açılıyor ve kullanıcıya oradaki ipuçu metni gösteriliyor.

Mobil cihazlarda üzerine gelme işlemi yapılamadığı için Kodlamada Mouse Hover veya Mouse Click fonksiyonları yerine Touch Mouse fonksiyonu kullanılmaktadır.

Aşağıdaki Css ve Js kodlarıyla Asp, Php çalışmalarınızı html alanına entegre edebilirsiniz. WordPress kullanıyorsanız “Responsive Mobile-Friendly Tooltip” adıyla sunulan wordpress eklentiside gayet başarılı iş çıkarmaktadır.

Html uyumlu, Responsive, Mobil kullanıcı dostu

Örnek Html ve Css kodları:

CSS

#tooltip:after /* triangle decoration */
{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #111;
content: '';
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -10px;
}

#tooltip.top:after
{
border-top-color: transparent;
border-bottom: 10px solid #111;
top: -20px;
bottom: auto;
}

#tooltip.left:after
{
left: 10px;
margin: 0;
}

#tooltip.right:after
{
right: 10px;
left: auto;
margin: 0;
}

Javascript

	$( function()
{
    var targets = $( '[rel~=tooltip]' ),
        target  = false,
        tooltip = false,
        title   = false;
 
    targets.bind( 'mouseenter', function()
    {
        target  = $( this );
        tip     = target.attr( 'title' );
        tooltip = $( '

<div id="tooltip"></div>


' );
 
        if( !tip || tip == '' )
            return false;
 
        target.removeAttr( 'title' );
        tooltip.css( 'opacity', 0 )
               .html( tip )
               .appendTo( 'body' );
 
        var init_tooltip = function()
        {
            if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                tooltip.css( 'max-width', $( window ).width() / 2 );
            else
                tooltip.css( 'max-width', 340 );
 
            var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                pos_top  = target.offset().top - tooltip.outerHeight() - 20;
 
            if( pos_left < 0 ) { pos_left = target.offset().left + target.outerWidth() / 2 - 20; tooltip.addClass( 'left' ); } else tooltip.removeClass( 'left' ); if( pos_left + tooltip.outerWidth() > $( window ).width() )
            {
                pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                tooltip.addClass( 'right' );
            }
            else
                tooltip.removeClass( 'right' );
 
            if( pos_top < 0 )
            {
                var pos_top  = target.offset().top + target.outerHeight();
                tooltip.addClass( 'top' );
            }
            else
                tooltip.removeClass( 'top' );
 
            tooltip.css( { left: pos_left, top: pos_top } )
                   .animate( { top: '+=10', opacity: 1 }, 50 );
        };
 
        init_tooltip();
        $( window ).resize( init_tooltip );
 
        var remove_tooltip = function()
        {
            tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
            {
                $( this ).remove();
            });
 
            target.attr( 'title', tip );
        };
 
        target.bind( 'mouseleave', remove_tooltip );
        tooltip.bind( 'click', remove_tooltip );
    });
});
						   

Html Kullanımı

	<abbr title="User Experience" rel="tooltip">UX</abbr>