Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Как сделать если не хватает места таблицу переносило на левую сторону от стрелки

Как сделать если не хватает места таблицу переносило на левую сторону от стрелки


     18.10.2012    Стили (CSS)    1678

вопрос
вообщем (у меня по русскому языку двойка, я не знаю, что в русском языке не существует слова вообщем) уже много времени ищу в интернете скрипт так и не нашел... проблема с tooltip... Таблице не хватает места для показа картинки, и она вылазит за поля браузера ...
Код картинки

Заранее Спасибо!!!

Ответил: ПафНутиЙ


JS:
function simple_tooltip(target_items, name){
$(target_items).each(function(i){
        $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
        var my_tooltip = $("#"+name+i);

        if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){

        $(this).removeAttr("title").mouseover(function(){
                    my_tooltip.css({opacity:0.95, display:"none"}).fadeIn(100);
        }).mousemove(function(kmouse){
                var border_top = $(window).scrollTop();
                var border_right = $(window).width();
                var left_pos;
                var top_pos;
                var offset = 15;
                if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){
                    left_pos = kmouse.pageX+offset;
                    } else{
                    left_pos = border_right-my_tooltip.width()-offset;
                    }
                my_tooltip.css({left:left_pos, top:kmouse.pageY+offset});
        }).mouseout(function(){
                my_tooltip.css({left:"-9999px"});
        });

        }

    });
}

$(function(){
    //вызов тултипов
    simple_tooltip(".ttp","tooltip");
});


CSS:
.tooltip {
    position:absolute;
    left:-2000px;
    top: -20000px;
    padding: 1px;
    max-width:450px;
    background: #7fafb3;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    .tooltip p {
        margin: 0;
        color: #f0efe8;
        padding: 3px 5px;    
        font: normal 12px/20px Tahoma, sans-serif;    
        }


HTML:
<a class="ttp" href="#" title="тултип">ссылка</a>

Комментарии пользователей (1)

travelmate
8 | 1

travelmate - 19 октября 2012 11:39 - Юзер


Спасибо!!! Но что теперь делать если в низу не хватает места ??

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы