toolTip特效

toolTip----工具提示，提示信息，提示框，提示文本

ToolTip效果可以是网站上一些帮助和提示信息表现得更直观，提升用户的体验，让网站更具创意和创新。

解决问题流程：

分析 ：

toolTip提示框：浮动的提示框，tooltip提示框可以显示出来

toolTip超链接：指一些文字或图片元素

特效

（1）显示：鼠标移动到tooltip超链接上时，提示框显示

（2）隐藏：鼠标移开时，提示框自动隐藏

（3）定位：提示框的文字需要根据提示框超链接确定

（4）可配置：提示框可以根据参数不同的，改变尺寸和显示内容

技术：

1.定位：position:absolute;

2.js创建dom:createElement和appendChild把元素节点追加到已有的元素---联合使用

3.鼠标事件：

mouseenter：当鼠标指针进入一个元素的边界区域时触发这个事件

mouseleaver当鼠标指针离开一个元素的边界区域时触发这个

mouseover和mouseenter事件的区别：

不论鼠标指针穿过被选元素或其子元素都会触发mouseover事件，对应是mouseout

只要在鼠标指针穿过被选元素后，才会触发mouseenter事件对应是mouseleave

setTimeout  :在指定的毫秒数后调用函数或计算表达式

注意：setTimeout只执行一次

clearTimeter

核心代码：

中国

圆角边框需要兼容，旧版本浏览器并不支持。
border-radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

编码开发：

开发工具：Dreamweaver

浏览器：Chrome;

cursor:help;---是网页制作css中光标类型是问号

cursor:hand是手型；

cursor:pointer--使用最多的

cursor:crosshairs是十字型

hand是手型
pointer也是手型，这里推荐使用这种，因为这可以在多种浏览器下使用。
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果

解决关键问题：

1提示框浮动显示

2.提示框位置

3.提示框宽高

   

原生JavaScript实现ToolTip效果

   

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

   

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

   

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

   

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