0

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

<div id="aaa" onmouseout="funk2()" onmouseover="funk1()" </div>
<div id="aaa2"></div>
<style>
    #aaa {
        position: absolute;
        top: 0px;
        left:0px;
        width: 50px;
        height: 50px;
        z-index: 1;
    }
    #aaa2 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 50px;
        height: 50px;
        z-index: 2;
        visibility: hidden;
    }
</style>

<script>
    function funk1() {
        id: aaa2.style.style.visibility = "visable";
    }

    function funk2() {
        id: aaa2.style.style.visibility = "hidden";
    }
</script>

Я смотрел примеры,но чтото ,они такие страшные(может черес кроссбраузерность).Кроче я ничево непонял .Но думаю ето можно сделать както проще. Например:

       <!DOCTYPE HTML>
        <html>
       <title>aaa</title>
       <head>

 <style>
 #aaa {
    position: absolute;
    top: 0px;
    left:0px;
    width: 50px;
    height: 50px;
    z-index: 1;
 background:red;
 }
 #aaa2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 20px;
    z-index: 2;
    visibility: hidden;
    background:yellow;
 }

#spantext {
    position: absolute;
    top: 0px;
    left: 0px;
    font:10px/1.5em Arial,serif;
}

</style>

<script>
timer=null;
function funk1(ideelementa,ideelementatext,text) 
{
    id: ideelementatext.style.text = text;\\\ ето не правильно.
    timer = setInterval(function(){move(ideelementa)},10);
    id: ideelementa.style.visibility = "visable";
}
function funk2(ideelementa) 
{
    clearInterval(timer)
    id: ideelementa.style.visibility = "hidden";
}
function move(ideelementa) {
    mouse_x=functiongetmouse_x() ;
    mouse_y=functiongetmouse_y() ;
    id: ideelementa.style.left =mouse_x+"px"; 
    id: ideelementa.style.top =mouse_y+"px";

}

function functiongetmouse_x() 
{
   mousex=\\.........как не знаю
return (mousex);
}

function functiongetmouse_y()
{
 mousey=\\.........как не знаю
  return (mousey);
}
</script>
</head>
<body>

 <div id="aaa" onmouseout="funk2(aaa2,spantext,какойто текст)" onmouseover="funk1(aaa2)" </div>
 <div id="aaa2"><span id="spantext"></span></div>
</body>
</html>

В то время ,когда думал про етот способ.Я обнаружил что есть cвойство title).Например: <span id="ide" title="какойто текст"> Но он действует ,1 раз если не витаскивать мишь с елемента.

4
  • Все правильно делаете.Стандартные средства не позволяют стилизировать сообщения,поэтому пишут подобные решения.Вот в картинок есть атрибуты alt,title,но добится красивых окон вы не сможете.
    – koza4ok
    Commented 30 дек. 2012 в 14:42
  • А теперь сюда ещё добавить AI для вычисления в каком именно месте нужно всплывать (чтобы, например, учитывать расположение элемента у границ окна) - вверх, вниз, вправо или влево от курсора, подгонку размеров тултипа в зависимости от размера или стиля текста, поддержку разметку в тултипе, задать интервал, через который нужно всплывать, если это надо, вынести настройки ... и ещё кучу полезных мелочей - и получится то самое, что уже изобретено тыщу раз и почему-то обозвано "страшным" :-) Хотя на самом деле там и понимать ничего не надо, надо просто один раз почитать readme и посмотреть примеры.
    – user6550
    Commented 1 янв. 2013 в 17:33
  • Ясно,иду учить Java script.И изучать "страшные" примеры.Мне пока хватит title.
    – Sirius
    Commented 1 янв. 2013 в 18:41
  • нашел не "страшный" пример host-biz.com/tooltips.html )
    – Sirius
    Commented 1 янв. 2013 в 19:17

1 ответ 1

1

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.