Создаю свой собственный плагин jquery для всплывающей подсказки - как узнать, где находится мышь? - PullRequest
Новая
       4

Создаю свой собственный плагин jquery для всплывающей подсказки - как узнать, где находится мышь?

0 голосов
/ 13 января 2011

хорошо, в основном я сделал 2 функции: показать подсказку и скрыть подсказку, и он может получить конфигурацию ajax или простую конфигурацию, я просто покажу вам: 

    <style type="text/css">

    .nube{display:none; height:auto; width:auto; position:absolute; z-index:99; left:200px;
          background-color:#fff;
          color:#999; border:1px solid #EEE; padding:20px; padding-top:10px; padding-bottom:10px;
-moz-border-radius-bottomleft: 0em;
    -webkit-border-bottom-left-radius: 0em;
-moz-border-radius-bottomright: 0.8em;
    -webkit-border-bottom-right-radius: 0.8em;
-moz-border-radius-topright: 0.8em;
    -webkit-border-top-right-radius: 0.8em;
-moz-border-radius-topleft: 0.8em;
    -webkit-border-top-left-radius: 0.8em;
}

</style>

А это и есть скрипт 

<script type="text/javascript">

function mostrar_tooltip(div,contenido,ajax){
    /// for now this 'if' is returns false allways so the last line its executed only
    if(contenido != ''){
    if(ajax == 0){
        // entonces no hay que
        $('#'+div).load('#'+contenido);
    }else{
        // contenido contiene la palabra clave a enviar a router
        $('#'+div).load('./router.php?que=tooltip&clave='+contenido);
    }
    // ya tenemos el contenido en el div (esta oculto y posicionado con CSS
    }
    $('#'+div).css({position:'fixed', top:($(window).scrollTop()+200)+"px", left:"200px"})
    $('#'+div).fadeIn(300);

}

function ocultar_tooltip(div){
    $('#'+div).fadeOut(100);
}


</script>

HTML выглядит как 

 <span class="nube" id="tip"> TIP HERE </span>

<p onmouseover="mostrar_tooltip(tip,'',0)" onmouseout="ocultar_tooltip(tip)"> HOVER ME </p>

Работает нормально, но проблема в том, что я хочу, чтобы это касалось мыши, а не прокрутки ...

Я бы хотел, чтобы всплывающая подсказка относилась к положению мыши, могу ли я это сделать?

я знаю, что-то связано с 

  .css({top:evt.pageY, left:evt.pageX})

и 

function(evt){}

но я не знаю, как это объединить ...: S спасибо!

1 Ответ

1 голос
/ 14 января 2011

Тони,

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

$(slide).hover(
  function(event){
    $('#tooltip').css({position: 'absolute', top: (event.pageY - 10), left: (event.pageX + 20)}).show("fast");      
  },
  function(){
     $(tooltip).hide("fast");
  }
 );

Сама подсказка:

<div id='tooltip'>Right-click to download</div>

CSS для него: 

#tooltip{
display: block;
position: absolute;
z-index: 9999;
border: 2px solid: #000;
background: #fff;
color: #000;
padding: 3px 6px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;

}

С уважением, Нил

...