Как скрыть подсказку браузера для ссылок - PullRequest
Новая
       8

Как скрыть подсказку браузера для ссылок

4 голосов
/ 06 мая 2011

Привет всем, я пытаюсь сделать свой собственный скрипт всплывающей подсказки, который следит за моей мышью с помощью jQuery. Все хорошо, но когда я нахожу ссылку и жду несколько секунд, браузер использует заголовок для собственной подсказки. Как я могу это остановить?!

Я ищу решение без удаления тега заголовка.

Мой код: 

<html>
<head>
    <title>Tooltip</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("a").mousemove("mouseover", function(e) {
                var x = e.clientX;
                var y = e.clientY-30;               
                var text = $(this).attr("title");
                var i = 0;
                for(i=0;i<1;i++) {
                    if(i=0) {
                        $("body").append('<div class="tooltip" style="margin-top:'+y+'px; margin-left: '+x+'px;">'+text+'</div>');
                    } else { 
                        $("div.tooltip").remove(); 
                        $("body").append('<div class="tooltip" style="margin-top:'+y+'px; margin-left: '+x+'px;">'+text+'</div>');
                    }
                }
            });
            $("a").mouseout(function() {
                $("div.tooltip").remove();
            });
        });
    </script>
    <style>
        body {
            top: 0px;
            left: 0px;
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        div.tooltip {
            background-color: #123534;
            position: fixed;
            z-index: 2;
            padding: 5px;
            heigth: 30px;
        }
        div.menu {

            background-color: #666666;
            margin-left: 100px;
            margin-top: 100px;
            position: fixed;
            width: auto;
            z-index: 1;
        }
        ul {
            margin: 0;
            padding: 5px;
            list-style-type: none;
        }
        li {
            display: inline;
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul>
            <li>
                <a href="#" title="test" >Link</a>
            </li>
            <li>
                <a href="#" title="asd" >Link</a>
            </li>
            <li>
                <a href="#" title="123" >Link</a>
            </li>
        </ul>

    </div>
</body>
</html>

И если кто-нибудь знает, как оптимизировать мой скрипт, я буду очень благодарен;]

Ответы [ 3 ]

3 голосов
/ 06 мая 2011

Это очень просто.Вам просто нужно поместить данные всплывающей подсказки в другой атрибут.Я использую спецификацию html5 и делаю "data-tooltip".

HTML: 

<a href="#" data-tooltip="my link tooltip content">My Link</a>

JS: 

var text = $(this).data("tooltip");

- ИЛИ -

Если по какой-либо причине вы не можете редактировать разметку, вы можете сделать это программно.Вам нужно будет сделать это перед наведением указателя мыши на document.ready, например: 

$(document).ready(function() {

    $("a").each(function() { 

        var $this = $(this);

        $this
            .data("tooltip", $this.attr("title"))
            .removeAttr("title");

    });

});

Затем, как вы упомянули выше, в своем перемещении мыши вы потянете его с помощью: 

var text = $(this).data("tooltip");
2 голосов
/ 06 мая 2011

В вашем mouseover событии вы можете .attr('title', '') удалить заголовок ..

, а затем в вашем mouseout событии вы можете .attr('title', text), так как вы сохранили заголовок ранее.

1 голос
/ 14 июня 2012 
$("a.the_link").hover(
function () {
 $(this).data('title', $(this).attr('title'));
    $(this).removeAttr('title');
},
function () {
    $(this).attr('title', $(this).data('title'));
});

Это идея, которую я видел, я не думал об этом, потому что мне это не нужно, но когда я увидел ее, я начал ее использовать.Он удаляет ссылку при наведении, но возвращает ее после того, как мышь покидает ссылку.Работает красиво.

...