js实现tooltip效果

<!DOCTYPE>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ToolTip效果</title>
<style>
body {
font-size: 14px;
line-height: 1.8;
background: url("bg.jpg") no-repeat center top;
font-family: "Microsoft YaHei", "微软雅黑";
}

#demo {
width: 500px;
margin: 30px auto;
padding: 20px 30px;
position: relative;
background-color: #fff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.2);
}

#demo h2 {
color: #03F;
}

#demo .tooltip {
color: #03F;
cursor: help;
}

.tooltip-box {
display: block;
background: #fff;
line-height: 1.6;
border: 1px solid #66CCFF;
color: #333;
padding: 20px;
font-size: 12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
overflow: auto;
}

#mycard img {
float: left;
width: 100px;
height: 100px;
padding: 10px;
}

#mycard p {
float: left;
width: 150px;
padding: 0 10px;
}
</style>
</head>

<body>
<div id="demo">
<h2>原生JavaScript实现ToolTip效果</h2>

<p>ToolTip效果是非常常见的网页特效，它可以在用户将指针放置在控件上时为用户显示提示信息。
比如简称文字显示一行文字全称，例：<a class="tooltip" id="tooltip1">中国</a>， <a class="tooltip" id="tooltip2">NBA</a>。
又比如显示一段文字，例：唐诗三百首中的<a class="tooltip" id="tooltip3">春晓</a>你会么？如果不看tooltip提示你背不出来的话，那么你
可要加油了。
</p>

<p>
ToolTip效果还可以用来显示图片，例：<a class="tooltip" id="tooltip4">西湖美景</a>。当然显示一块儿带格式的内容也不在话下，例：
<a class="tooltip" id="tooltip5">我的资料</a>。
</p>

<p>
甚至你可以显示一整个网站：例：<a class="tooltip" id="tooltip6">慕课网</a>。
</p>

<p>
注意好的ToolTip需要考虑样式、效果、页面的边界等信息，希望你可以做出更漂亮的ToolTip效果。
</p>
</div>
<script>
var demo = document.getElementById('demo');
var className = "tooltip-box";
//处理浏览器对事件处理的不兼容问题
function addEvent(element, event, callbackFunc){
if(element.addEventListener) {
element.addEventListener(event, callbackFunc);
}else if (element.attachEvent) {
element.attachEvent('on'+event, callbackFunc);
}

}

addEvent(demo,'mouseover', function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
if(target.className == 'tooltip') {
var _html;
var _id;
var _width =200;
switch(target.id) {
case "tooltip1":
_id = "t1";
_html = "中华人民共和国";
break;
case "tooltip2":
_id = "t2";
_html = "美国篮球职业联赛";
break;
case "tooltip3":
_id = "t3";
_html = "<h2>春晓</h2><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p>";
_width = 100;
break;
case "tooltip4":
_id = "t4";
_html = '<img src="1.jpg" width="500" />';
_width = 520;
break;
case "tooltip5":
_id = "t5";
_html = '<div id="mycard"><img src="2.jpg" alt=""/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>';
_width = 300;
break;
case "tooltip6":
_id = "t6";
_html = '<iframe src="http://www.imooc.com/" width="480" height="300"></iframe>';
_width = 500;
break;
default:
return false;
}
showTooltip(target,_id, _html, _width, 200 )
}
})
//obj - tooltip element
//id - tooptip id
//html - tooltip html
//width - tooltip width
//height - tooltip height

function showTooltip(obj, id, html, width, height) {
if(document.getElementById(id) == null){
var toolTipBox;
toolTipBox = document.createElement("div");
toolTipBox.className = className;
toolTipBox.id = id;
toolTipBox.innerHTML = html;
toolTipBox.style.width = width ? width+'px': 'auto';
toolTipBox.style.height = height ? height+'px': 'auto';
toolTipBox.style.position = 'absolute';
toolTipBox.style.display = 'block';

var left = obj.offsetLeft;
var top = obj.offsetTop;
//left，不让tooltip超出右侧浏览器
if(left+ toolTipBox.offsetWidth > document.body.offsetWidth) {
left = document.body.offsetWidth - toolTipBox.offsetWidth;
var containerLeft = document.getElementById("demo").offsetWidth;
//不让tooltip超出左侧浏览器
if(left < containerLeft) {
left = 0;
}
}
toolTipBox.style.left = left + 'px';
toolTipBox.style.top = (obj.offsetTop+ 20) + 'px';
obj.appendChild(toolTipBox);

obj.onmouseleave = function(){
document.getElementById(id).style.display = 'none';
}
}else {
document.getElementById(id).style.display = 'block';
}
}
</script>
</body>

</html>

转载于:https://www.cnblogs.com/ycherry/p/7263104.html

js实现tooltip效果相关推荐

原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...
php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...
《javaScript100例|04》自动播放——Js幻灯片缓冲效果
目录效果图示例源码地址: 效果图示例 <html> <head> <title>自动播放--幻灯片缓冲效果</title> <style& ...
JS特效代码大全（十一）超炫的js图片展示效果（三）
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
3.15 Ext JS 之 Tooltip 的基本使用
Ext JS 创建 Tooltip 的类型根据类创建实例. Ext.tip.ToolTip 单例, 全局 .Ext.tip.QuickTip 直接设置HTML或是DOM的属性 1. 创建 Ext.t ...
js 实现筋斗云效果(点击tab栏里面的某个地方,会有图片移动到此地方)
js 实现筋斗云效果 animate.js <!DOCTYPE html> <html lang="en"> <head><meta ch ...
pixi.js 制作流星雨效果
pixi.js 制作流星雨效果 //创建流星们creatShootingStart(){let startNum = 25;//个数this.startSp = [];//星星们的集合//流星消失的 ...
原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录效果图设计思路基本架子蒙版放大效果图逻辑设计蒙版跟放大的图肯定要先隐藏鼠标移入图片显示蒙版鼠标移动蒙版跟着移动处理边界情况大图移动小优 ...

js实现tooltip效果

js实现tooltip效果相关推荐

最新文章

热门文章