Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы » jQuery Tooltip (Всплывающая подсказка)

jQuery Tooltip (Всплывающая подсказка)


     13.01.2012    jquery, всплывающие подсказки    Общие вопросы, jQuery    6560

вопрос
Есть два скрипта, в одном есть функция так сказать переворачивания всплывающей подсказки возле края дисплея, но скрипт большой, и второй скрипт поменьше но без этой функции. Как можно с первого скрипта добавить эту функцию во второй?


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


Всё гораздо проще, нужно просто использовать другой скрипт))):
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: -2000px;
    max-width:450px;
    background: #fff;  
    border: solid 1px #e5e5e5;
    }
    .tooltip p {
        margin: 0;
        color: #303030;
        padding: 3px 5px;  
        border: solid 1px #e5e5e5;
        font: normal 12px/20px Tahoma, sans-serif;
        }

14 комментариев

kovalenko3331
Юзер

kovalenko3331 - 19 января 2012 10:32 -

Паша, помоги разобраться, подключил скрипт в main.tpl
<script type="text/javascript" src="{THEME}/js/tooltip.js"></script>
<script>
$(function(){
    //вызов тултипов
    simple_tooltip(".ttp","tooltip");
});
</script>

блок где хочу выводить взял в
<div class="ttp"></div>

и пишет "undefined" и выводит стандартный title.

1KoTuK
Юзер

1KoTuK - 19 января 2012 11:01 -

У вас проблема вот здесь:

Цитата: kovalenko3331
simple_tooltip(".ttp","tooltip");

Цитата: kovalenko3331
<script>
$(function(){
//вызов тултипов
simple_tooltip(".ttp","tooltip");
});
</script>


скажем так - вы не указали на какой тег будет работать подсказка
simple_tooltip(".ttp a","tooltip");

видите мы в строке вставили a и теперь предположим установив тултип таким образом
<a href="#" title="ваш всплывающий текст"

всё будет отлично работать

т.е. дожно получиться вот так:

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

ПафНутиЙ
Админ

ПафНутиЙ - 19 января 2012 16:43 -

Тултип обрабатывает тег title и если этот тег не определён - он будет выдавать undefined
<div class="ttp" title="текст"></div>

Каков вопрос - таков и ответ. Просто помните об этом.

Sander
PHP-developer

Sander - 19 января 2012 18:55 -

Мне скрипт не нравится.
Он сразу обрабатывает все тайтлы у объектов с классом ttp, а не при наведении курсора.

Нет необходимости использовать функцию, можно обойтись и без нее.
Но еще лучше делать через $.fn.simple_tooltip

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

ПафНутиЙ
Админ

ПафНутиЙ - 19 января 2012 19:12 -

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

Каков вопрос - таков и ответ. Просто помните об этом.

Sander
PHP-developer

Sander - 19 января 2012 20:41 -

Скрипт будет запускаться при наведении курсора на объект, а не создавать кучу тултипов, которые могут быть и не востребованы...

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

kovalenko3331
Юзер

kovalenko3331 - 20 марта 2012 09:54 -

Подскажи как сделать чтобы обрабатывались теги а и img?
Ставлю так (".ttp","tooltip") выводит undefined, так (".ttp a","tooltip") выводит title ссылок, а мне нужно еще и изображений. Пробовал так: $(function({simple_tooltip(".ttp a","tooltip");});$(function({simple_tooltip(".ttp img","tooltip");}); и так: (".ttp а img","tooltip") и другие варианты, но без успешно.

nowheremany
Эксперт

nowheremany - 21 марта 2012 06:35 -

А отдельно не пробывали?
(".ttp a","tooltip")
(".ttp img","tooltip")

Благодарность принимаю тут Связь

ПафНутиЙ
Админ

ПафНутиЙ - 21 марта 2012 13:26 -

сразу оба тега не будут обрабатываться. либо одно, либо другое.

Каков вопрос - таков и ответ. Просто помните об этом.

kovalenko3331
Юзер

kovalenko3331 - 21 марта 2012 14:01 -

Блин ну засада просто, первый скрипт что в вопросе у меня, слишком большой, у второго нет переворачивания, а в твоем нельзя указать несколько тегов, к примеру:
<script>
$(document).ready(function(){$(".new a").easyTooltip()});$(document).ready(function(){$(".new img").easyTooltip()});$(document).ready(function(){$(".items img").easyTooltip()});
</script>

ПафНутиЙ
Админ

ПафНутиЙ - 21 марта 2012 14:12 -

я обычно так делаю:
simple_tooltip(".ttp, .ttp_lnk a","tooltip");

соответственно если указать класс ttp_lnk - будет тултип у всех ссылок в блоке, если прописать ttp - будет тултип из title блока, имеющего этот класс

Каков вопрос - таков и ответ. Просто помните об этом.

kovalenko3331
Юзер

kovalenko3331 - 21 марта 2012 14:23 -

Спасибо за подсказку, буду пробовать. Не охота снова искать скрипт, твой вполне подходит.

kovalenko3331
Юзер

kovalenko3331 - 21 марта 2012 15:28 -

Паша, еще вопрос, можно поднять немного положение title относительно курсора?, в скрипте нашел только расстояние вправо от него.

korkus
Юзер

korkus - 31 октября 2013 19:02 -

Скажите пожалуйста, как исправить отображение данного tooltip в браузере Safary?
В Сафари, при наведении на ссылку тултип показывается довольно далеко от самой ссылки, что очень напрягает...
Есть ли решение?
Или может есть какой-то другой готовый тултип корректно работающий и в Сафари?

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

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

наверх