js一个非常好的Tooltip代码

本文介绍了一种使用JavaScript实现的动态提示框效果,通过修改HTML元素的样式来达到平滑的显示与隐藏过渡,适用于网页交互设计。

<script language=javascript>
<!--
//***********默认设置定义.*********************
tPopWait=1;    //停留tWait豪秒后显示提示。
tPopShow=6000;    //显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=95;
fontcolor="#333333";
bgcolor="#f7f7f7";
bordercolor="#000000";

//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;

document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText {  background-color: " + bgcolor + ";color:" + fontcolor + "; border: 1px " + bordercolor + " solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");


function showPopupText(){
var o=event.srcElement;
  MouseX=event.x;
  MouseY=event.y;
  if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
       if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
  if(o.dypop!=sPop) {
      sPop=o.dypop;
      clearTimeout(curShow);
      clearTimeout(tFadeOut);
      clearTimeout(tFadeIn);
      clearTimeout(tFadeWaiting); 
      if(sPop==null || sPop=="") {
        dypopLayer.innerHTML="";
        dypopLayer.style.filter="Alpha()";
        dypopLayer.filters.Alpha.opacity=0; 
        }
      else {
        if(o.dyclass!=null) popStyle=o.dyclass
          else popStyle="cPopText";
        curShow=setTimeout("showIt()",tPopWait);
      }
     
  }
}

function showIt(){
    dypopLayer.className=popStyle;
    dypopLayer.innerHTML=sPop;
    popWidth=dypopLayer.clientWidth;
    popHeight=dypopLayer.clientHeight;
    if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
      else popLeftAdjust=0;
    if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
      else popTopAdjust=0;
    dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
    dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
    dypopLayer.style.filter="Alpha(Opacity=0)";
    fadeOut();
}

function fadeOut(){
  if(dypopLayer.filters.Alpha.opacity<popOpacity) {
    dypopLayer.filters.Alpha.opacity+=showPopStep;
    tFadeOut=setTimeout("fadeOut()",1);
    }
    else {
      dypopLayer.filters.Alpha.opacity=popOpacity;
      tFadeWaiting=setTimeout("fadeIn()",tPopShow);
      }
}

function fadeIn(){
  if(dypopLayer.filters.Alpha.opacity>0) {
    dypopLayer.filters.Alpha.opacity-=1;
    tFadeIn=setTimeout("fadeIn()",1);
    }
}
document.onmouseover=showPopupText;
-->
</script>

<a href="http://bbs.51js.com" title="glkrengoreg">http://bbs.51js.com</a> 

<think>嗯,用户想用HTML、JS和CSS写一个右边的tooltip。首先,我得回忆一下tooltip的一般实现方法。通常,tooltip可以通过CSS来控制显示和位置,结合HTML结构和JS来处理交互。 首先,考虑HTML结构。需要一个触发元素,比如按钮或者链接,当用户悬停或点击时显示tooltip。然后tooltip本身应该是一个隐藏的元素,可能在触发元素的旁边。这里用户指定要右边的tooltip,所以tooltip应该出现在触发元素的右侧。 接下来是CSS部分。tooltip默认应该是隐藏的,比如display: none或者visibility: hidden。当触发事件发生时,比如hover,就改变这个状态。定位方面,可能需要使用绝对定位,相对于触发元素的父容器。所以父容器需要设置position: relative,这样tooltip的绝对定位会相对于父元素而不是整个页面。 右边的位置,可以通过left: 100%来让tooltip出现在触发元素的右边,然后可能需要调整top和transform来垂直居中。例如,top: 50%; transform: translateY(-50%)可以让tooltip垂直居中。还要考虑tooltip的样式,比如背景颜色、文字颜色、圆角、阴影等,使其看起来美观。 然后是JS部分。可能需要用事件监听器,比如mouseover和mouseout,来触发显示和隐藏tooltip。或者,如果想用点击触发,可以改用click事件,但用户没有特别说明,所以默认应该是hover。使用JS动态添加和移除类,或者直接修改样式属性,比如display或opacity。 不过,有时候纯CSS也可以实现hover效果,比如使用:hover伪类加上相邻兄弟选择器。但如果是动态内容或者更复杂的交互,可能需要JS。这里用户要求用JS,所以需要结合JS来处理显示和隐藏。 另外,需要考虑tooltip的内容是否动态。比如,如果tooltip的内容需要从数据属性中获取,可以通过JS读取属性并插入到tooltip元素中。例如,在触发元素上设置data-tooltip属性,JS读取这个值并填充到tooltip里。 还有,事件委托的问题。如果页面中有多个触发元素,可能需要事件委托来优化性能,而不是为每个元素单独绑定事件。但用户可能只需要一个简单的例子,所以先实现单个的情况。 另外,动画效果。如果希望tooltip有淡入淡出或者滑动的效果,可以用CSS transition来实现。例如,设置opacity和transition属性,这样显示和隐藏时有平滑的效果。 测试一下可能的错误点。比如,tooltip的位置是否正确,特别是在不同屏幕尺寸下是否有偏移。使用transform: translate可能会影响定位,需要确认。还有z-index的问题,确保tooltip在其他元素之上,避免被遮挡。 最后,代码结构。HTML中要有触发元素和tooltip的结构,CSS定义样式和定位,JS处理交互。可能需要给触发元素和tooltip添加类名,方便样式和JS选择。 总结步骤: 1. HTML结构:触发按钮和tooltip元素,tooltip放在触发元素的同一父容器内。 2. CSS定位:父容器相对定位,tooltip绝对定位,right方向调整。 3. JS事件:监听mouseover和mouseout,切换tooltip的显示状态。 4. 样式美化:背景、颜色、箭头等。</think>下面我将分步骤介绍如何使用HTML、CSS和JavaScript实现一个右侧显示的Tooltip: 一、HTML结构 ```html <button class="tooltip-trigger">悬停查看提示</button> <div class="tooltip">这是一个右侧提示信息</div> ``` 二、CSS样式 ```css .tooltip { display: none; position: absolute; background: #333; color: white; padding: 8px 12px; border-radius: 4px; font-size: 14px; /* 右侧定位 */ left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; /* 添加小箭头 */ animation: fadeIn 0.2s ease-in; } .tooltip::after { content: ""; position: absolute; right: 100%; top: 50%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent #333 transparent transparent; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .tooltip-trigger { position: relative; margin: 100px auto; display: block; padding: 10px 20px; } ``` 三、JavaScript交互 ```js const trigger = document.querySelector('.tooltip-trigger'); const tooltip = document.querySelector('.tooltip'); // 鼠标悬停显示 trigger.addEventListener('mouseenter', () => { tooltip.style.display = 'block'; }); // 鼠标离开隐藏 trigger.addEventListener('mouseleave', () => { tooltip.style.display = 'none'; }); // 动态定位(处理窗口变化) window.addEventListener('resize', () => { const rect = trigger.getBoundingClientRect(); tooltip.style.left = `${rect.right + 10}px`; tooltip.style.top = `${rect.top + rect.height/2}px`; }); ``` 四、关键点说明 1. 定位原理: - 父元素需要设置 `position: relative` - Tooltip使用 `position: absolute` - 通过 `left: calc(100% + 10px)` 定位到右侧 - `transform: translateY(-50%)` 实现垂直居中 2. 箭头实现: - 使用伪元素 `::after` - 通过border技巧创建三角形 - 调整 `border-color` 控制箭头颜色 3. 交互优化: - 添加淡入动画提升体验 - 窗口大小变化时重新定位 - 支持动态内容加载 五、扩展建议 1. 添加`data-tooltip`属性支持动态内容: ```html <button data-tooltip="动态提示内容">...</button> ``` 2. 支持多方向显示: ```css /* 添加方向类 */ .tooltip.top { /* 顶部样式 */ } .tooltip.bottom { /* 底部样式 */ } ``` 3. 移动端适配: ```js // 添加触摸事件 trigger.addEventListener('touchstart', () => { tooltip.style.display = 'block'; }); ``` 完整示例可通过CodePen查看:https://codepen.io/anon/pen/abGvYQd(示例链接需替换为实际部署地址)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

rjzou2006

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值