quill鼠标悬浮 出现提示_Tooltip浮动提示框效果（掌握里面的小知识）

1

2

3

4

5

6

7

8 body{

9 font-size: 14px;

10 line-height: 1.8;

11 background: url("img/bg.jpg") no-repeat center top;

12 font-family: "微软雅黑";

13 }

14 #demo{

15 width: 500px;

16 margin: 30px auto;

17 padding: 20px 30px;

18 position: relative;

19 background-color: #fff;

20 border-radius: 10px;

21 -moz-border-radius: 10px;/*这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性*/

22 -webkit-border-radius: 10px;/*苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核*/

23 box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);

24 -moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);

25 -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);

26 }

27 #demo h2{

28 color: #03f;

29 }

30 #demo .tooltip{

31 color: #03f;

32 cursor: help;

33 }

34 .tooltip-box{

35 display: block;

36 background: #fff;

37 line-height: 1.6;

38 border: 1px solid #66CCFF;

39 color: #333;

40 padding: 20px;

41 font-size: 12px;

42 border-radius: 5px;

43 -moz-border-radius: 5px;

44 -webkit-border-radius: 5px;

45 overflow: auto;

46 }

47 #mycard img{

48 float: left;

49 width: 100px;

50 height: 100px;

51 padding: 10px;

52 }

53 #mycard p{

54 float: left;

55 width: 150px;

56 padding: 0 10px;

57 }

58

59

60 window.οnlοad=function(){

61 //绑定事件的函数

62 function addEvent(obj,event,fn){ //要绑定的元素对象，要绑定的事件，触发的回调函数

63 if(obj.addEventListener){ //非IE，支持冒泡和捕获

64 obj.addEventListener(event,fn,false);

65 }else if(obj.attachEvent){ //IE，只支持冒泡

66 obj.attachEvent('on'+event,fn);

67 }

68 }

69 //通过用户代理的方式判断是否是IE的方法，不能判断出IE11

70 var isIE = navigator.userAgent.indexOf("MSIE") > -1;

71

72 var $ = function(id){

73 return document.getElementById(id);

74 }

75 var demo = $("demo");

76 //obj - ToolTip超链接元素

77 //id - ToolTip提示框id

78 //html - ToolTip提示框HTML内容

79 //width - ToolTip提示框宽度(可选)

80 //height - ToolTip提示框高度(可选)

81 function showTooltip(obj,id,html,width,height){

82 if($(id)==null){

83 //创建

xxxxxxxx

84 var toolTipBox;

85 toolTipBox = document.createElement('div');

86 toolTipBox.className = "tooltip-box";

87 toolTipBox.id = id;

88 toolTipBox.innerHTML = html;

89 obj.appendChild(toolTipBox);

90 toolTipBox.style.width = width ? width + 'px':"auto";

91 toolTipBox.style.height = height ? height + 'px':"auto";

92 if(!width && isIE){

93 toolTipBox.style.width = toolTipBox.offsetWidth;//因为IE不支持auto属性

94 }

95 toolTipBox.style.position = 'absolute';

96 toolTipBox.style.display = 'block';

97 var left = obj.offsetLeft;

98 var top = obj.offsetTop + 20;

99 //当浏览器窗口缩小时不让提示框超出浏览器

100 if(left + toolTipBox.offsetWidth > document.body.clientWidth){

101 var demoLeft = demo.offsetLeft;

102 left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft;

103 if(left < 0)

104 left = 0;

105 }

106 toolTipBox.style.left = left + 'px';

107 toolTipBox.style.top = top + 'px';

108 addEvent(obj,"mouseleave" ,function(){

109 setTimeout(function(){

110 $(id).style.display = 'none';

111 },300);

112 });

113 }

114 else{

115 //显示

116 $(id).style.display = 'block';

117 }

118 }

119 //事件冒泡

120 addEvent(demo,'mouseover',function(e){

121 var event = e || window.event;

122 var target = event.target || event.srcElement;//IE下,event对象有srcElement属性,但是没有target属性;

123 //Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的

124 //event.srcElement：表示的当前的这个事件源。

125 if(target.className == "tooltip"){

126 var _html;

127 var _id;

128 var _width = 200;

129 switch (target.id){

130 case "tooltip1":

131 _id = "t1";

132 _html = "中华人民共和国";

133 break;

134 case "tooltip2":

135 _id = "t2";

136 _html = "美国篮球职业联赛";

137 break;

138 case "tooltip3":

139 _id = "t3";

140 _html = "

春晓

春眠不觉晓，

处处闻啼鸟。

夜来风雨声，

花落知多少。

";

141 _width = 100;

142 break;

143 case "tooltip4":

144 _id = "t4";

145 _html = " ";

146 _width = 520;

147 break;

148 case "tooltip5":

149 _id = "t5";

150 _html = "

昵称一定要长

我的简介我的简介

";

151 _width = 300;

152 break;

153 case "tooltip6":

154 _id = "t6";

155 _html = "";

156 _width = 500;

157 break;

158 }

159 showTooltip(target,_id,_html,_width);

160 }

161 });

162 /* var t1 = $("tooltip1");

163 var t2 = $("tooltip2");

164 var t3 = $("tooltip3");

165 var t4 = $("tooltip4");

166 var t5 = $("tooltip5");

167 var t6 = $("tooltip6");

168 t1.onmouseenter = function () {

169 showTooltip(this, "t1", '中华人民共和国', 200);

170 };

171 t2.onmouseenter = function () {

172 showTooltip(this, "t2", '美国篮球职业联赛', 200);

173 };

174 t3.onmouseenter = function () {

175 showTooltip(this, "t3", '

春晓

春眠不觉晓，

处处闻啼鸟。

夜来风雨声，

花落知多少。

', 100);

176 };

177 t4.onmouseenter = function () {

178 showTooltip(this, "t4", ' ', 520);

179 };

180 t5.onmouseenter = function () {

181 var _html = '

昵称一定要长

我的简介我的简介

';

182 showTooltip(this, "t5", _html, 300);

183 };

184 t6.onmouseenter = function () {

185 var _html = ''

186 showTooltip(this, "t6", _html, 500);

187 };*/

188 }

189

190

191

192

原生JavaScript实现ToolTip效果

193

ToolTip效果是非常常见的网页特效，它可以在用户将指针放置在控件上时为用户显示提示信息。

194 比如简称文字显示一行文字全称，例：中国， NBA。

195 又比如显示一段文字，例：唐诗三百首中的春晓你会么？如果不看tooltip提示你背不出来的话，那么你

196 可要加油了。

197

198

199 ToolTip效果还可以用来显示图片，例：西湖美景。当然显示一块儿带格式的内容也不在话下，例：

200 我的资料。

201

202

203 甚至你可以显示一整个网站：例：慕课网。

204

205

206 注意好的ToolTip需要考虑样式、效果、页面的边界等信息，希望你可以做出更漂亮的ToolTip效果。

207

208

209

210