Текстовая подсказка при наведении курсора - PullRequest
Новая
       30

Текстовая подсказка при наведении курсора

1 голос
/ 17 марта 2011

У меня есть набор пуль, и я хотел бы создать всплывающую подсказку, когда наведу курсор мыши на каждую из них по отдельности.Текст всплывающей подсказки может быть тегом заголовка маркера, и его необходимо вывести в контейнер всплывающей подсказки.Новичок в javascript, поэтому мне нужна помощь.

Вот мой CSS: 

.container ul { width: 300px; height: 30px; display: block; background: #CCC;  }
.container li { width: 28px; height: 28px; display: block; float: left; border: 1px solid #FFF; }
.tooltip { width: auto: height: 12px; display: block; }

Мой HTML: 

<div id="tooltip" class="tooltip"></div>
<div class="container">
    <ul>
        <li class="book" title="book"></li>
        <li class="movie" title="movie"></li>
        <li class="tv" title="tv"></li>
    </ul>
</div>

И мой javascript: 

<script>
$(document).ready(function(){
    $("ul li").mouseover(function() {
         $("#tooltip").text($(this).attr("title"));
    });
});
</script>

Ответы [ 3 ]

1 голос
/ 17 марта 2011

изменение от

$("#tooltip").text("this.val(alt)")

до

$("#tooltip").text($(this).attr('alt'));

1 голос
/ 17 марта 2011

Это не дает прямого ответа на ваш вопрос, но есть несколько удобных плагинов jQuery, которые уже существуют для этой функции.Мне нравится этот: http://craigsworks.com/projects/qtip/a

Некоторые другие: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

0 голосов
/ 31 января 2015

Я бы предложил всплывающую подсказку о функции jQuery UI.

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

Вы можете установить положение всплывающей подсказки, а также положение текста внутри. 

$('textarea').tooltip({
        position: {
            my: 'left center',
            at: 'right center'
        }
    });

Но вы можете получить текст подсказки в любом месте кода. 

$('select').tooltip({
position: {
        my: 'right center',
        at: 'left center'
    },
    content: function(){
        if($(this).find('option:selected').val() == 0 )
        {
            return '...';
        }
        else
        {
            return '...' + $(this).find('option:selected').val() + '...';
        }
    }
});

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

...