制作我自己的工具提示插件 - 相对于鼠标,如何知道鼠标在哪里?
-
11-10-2019 - |
题
好的,基本上我制作了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谢谢!
解决方案
托尼,
这是我自己网站上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;
}
关于尼尔
不隶属于 StackOverflow