Форум

фонарик · #1 (**permalink**) 28.02.2013, 02:55

http://learn.javascript.ru/play/eL6Hkb
Опять непосильная задача

Перерыл весь гугл, пытался обратиться к атрибуту title в блоке div. Вместо title была пустая строка. Оказалось все дело в скрипте подсказки.
В строке 46 скрипт сохраняет атрибут title в переменную, а сам атрибут удаляет, чтобы браузер не показывал свою подсказку параллельно. Так вот, проблема 1: Как теперь при клике по блоку узнать его атрибут title?

И еще второй вопрос, хотелось бы упростить код подсказки, много буковок пугают каждый раз и привыкнуть к этому очень сложно. В скрипте подсказки есть переменная show_time, отвечающая за время, которое подсказка показывается. Мне эта переменная не нужна, подсказки должны быть видны бесконечно, отсюда просьба, помогите пожалуйста вырезать из скрипта эту переменную и все что с ней связано.

рони · #2 (**permalink**) 28.02.2013, 03:05

фонарик,

<!DOCTYPE HTML>
<html>
    
    <head></head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
        #title {
            /*Всплывающая подсказка*/
            position:absolute;
            display:block;
            text-shadow: -1px -1px 0px #FFFFFF;
            border:2px ridge #bb9f72;
            border-radius:9px;
            padding:4px;
            min-height:5px;
            max-height:300px;
            min-width:50px;
            max-width:530px;
            color:#332207;
            background-color: rgba(221, 203, 174, 0.8);
            background-size:100% 100%;
        }
    </style>
    
    <body>
        <div id='ff' class='tt' title='ololo' style="width:100px; height:100px; background-color:gray; border:1px solid red;" onmousedown="info(this)"></div>
        <script type="text/javascript">
            function info(elem) {
                alert(elem._title)
            }
        </script>
        <script>
            var s_x = 13,
                s_y = 0; //смещения подсказки относительно курсора
            $(document).ready(function () {
                $(('<span id=title></span>')).appendTo('body').hide()

                $('[title]').each(function (i, e) {
                    //запоминаем значение атрибута в свойстве _title
                    //сам атрибут удаляем (чтобы браузер не показывал собственные подсказки)
                    e._title = $(this).attr('title').replace(/\\n/gim, '<br>');
                    $(this).removeAttr('title')

                        .mouseover(function (evt) {
                        $('#title')
                            .html($(this).get(0)._title)
                            .fadeIn(0).css({
                            left: (evt.pageX + s_x) + 'px',
                            top: (evt.pageY + s_y) + 'px'
                        })
                    })
                        .mouseout(hide_title)

                        .mousemove(function (evt) {
                        $('#title').css({
                            left: (evt.pageX + s_x) + 'px',
                            top: (evt.pageY + s_y) + 'px'
                        })
                    });
                })
            })

            function hide_title() {
                $('#title').hide();
            }
        </script>
    </body>

</html>

фонарик · #3 (**permalink**) 28.02.2013, 03:10

рони, да вы просто спецназ в своем деле

Препарировали подсказку как матерый хирург и атрибуту title гайку прикрутили где ее не было

Вы, наверное, думаете, как все просто )) В любом случае, спасибо большое

Deff · #4 (**permalink**) 28.02.2013, 03:28

фонарик,
Может плагином? (Правдо jQuery

<!DOCTYPE HTML>
<html>
  <head>
<link rel="stylesheet" type="text/css" href="http://st1.bbcorp.ru/style/extra.26.css" />
<script type="text/javascript" src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://st1.bbcorp.ru/js/jquery.tipsy.min.js"></script>
<script type="text/javascript">$(document).ready(function() { $('img[title],a[title]').tipsy({fade: true, gravity: 's'});});</script>
<style>
.tipsy-inner {
 font-size:13px;
 font-family:'Times New Roman';
 letter-spacing:1px;
}
</style>
 </head>
  <body style="heidht:100%;padding:39px;">
<a title="Привет Всем!" href="!35985!http://javascript.ru/forum/misc/35985-stilizovannaya-podskazka-i-dostup-k-title.html">Типо так</a>
  </body>
</html>

http://onehackoranother.com/projects/jquery/tipsy/

Форум

Справочник

Discord чат

Курсы javascript