3 Star 0 Fork 1

Gitee 极速下载/html5tooltips-js

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
此仓库是为了提升国内下载速度的镜像仓库,每日同步一次。 原始仓库: https://github.com/ytiurin/html5tooltipsjs
克隆/下载
html5tooltips.1.5.1.min.js 17.88 KB
一键复制 编辑 原始数据 按行查看 历史
Yevhen Tiurin 提交于 9年前 . Update to 1.5.1
/*
* html5tooltips 1.5.1
* 2016-05-18
* (c) Eugene Tiurin; MIT license
*
* Tooltips with smooth 3D animation.
*
* Contributors: nomiad, Friedel Ziegelmayer, Arend van Beelen jr.,
* Peter Richmond, Bruno Wego, Kahmali Rose
*/
/* THIS CSS CODE SHOULD BE COPIED TO A SEPARATE FILE AND LINKED TO PAGE
.html5tooltip-box{background-color:#2A2A2A;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 10px rgba(255,255,255,.15);color:#F7F7F7;font-family:arial,sans-serif;font-size:11px;font-weight:700}.html5tooltip-box:before{background-color:inherit;box-shadow:inherit;content:'';display:block;height:12px;position:absolute;width:12px;transform:translate3d(-6px,-6px,0) rotate3d(0,0,1,45deg);left:10px;top:10px}.html5tooltip-more,.html5tooltip-text{background-color:inherit;border-radius:inherit;position:relative}.html5tooltip-text{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;padding:7px 9px}.html5tooltip-more .html5tooltip-text{margin-top:-7px}.html5tooltip-bottom .html5tooltip-box:before{left:50%;top:0}.html5tooltip-left .html5tooltip-box:before{left:100%;top:50%}.html5tooltip-right .html5tooltip-box:before{left:0;top:50%}.html5tooltip-top .html5tooltip-box:before{left:50%;top:100%}.html5tooltip-bottom,.html5tooltip-left,.html5tooltip-right,.html5tooltip-top{-moz-perspective:300px;-ms-perspective:300px;-o-perspective:300px;-webkit-perspective:300px;perspective:300px}.html5tooltip-bottom.animating,.html5tooltip-left.animating,.html5tooltip-right.animating,.html5tooltip-top.animating{transition:top .3s}.html5tooltip-box.animating{-moz-transition:opacity .3s,-moz-transform .3s;-ms-transition:opacity .3s,-ms-transform .3s;-o-transition:opacity .3s,-o-transform .3s;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.html5tooltip-more.animating{-moz-transition:height .3s;-ms-transition:height .3s;-o-transition:height .3s;-webkit-transition:height .3s;transition:height .3s}.fadein-from{opacity:0}.fadein-to{opacity:1}.scalein-from{opacity:0;-moz-transform:scale3d(.7,.7,.7);-ms-transform:scale3d(.7,.7,.7);-o-transform:scale3d(.7,.7,.7);-webkit-transform:scale3d(.7,.7,.7);transform:scale3d(.7,.7,.7)}.scalein-to{opacity:1;-moz-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);-o-transform:scale3d(1,1,1);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}.html5tooltip-bottom .scalein-to{-moz-transform-origin:center top;-ms-transform-origin:center top;-o-transform-origin:center top;-webkit-transform-origin:center top;transform-origin:center top}.html5tooltip-left .scalein-to{-moz-transform-origin:right center;-ms-transform-origin:right center;-o-transform-origin:right center;-webkit-transform-origin:right center;transform-origin:right center}.html5tooltip-right .scalein-to{-moz-transform-origin:left center;-ms-transform-origin:left center;-o-transform-origin:left center;-webkit-transform-origin:left center;transform-origin:left center}.html5tooltip-top .scalein-to{-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;-webkit-transform-origin:center bottom;transform-origin:center bottom}.foldin-from,.foldout-from{opacity:0}.foldin-to,.foldout-to{opacity:1;-moz-transform:rotate3d(0,0,0,0);-ms-transform:rotate3d(0,0,0,0);-o-transform:rotate3d(0,0,0,0);-webkit-transform:rotate3d(0,0,0,0);transform:rotate3d(0,0,0,0)}.html5tooltip-bottom .foldin-from,.html5tooltip-top .foldout-from{-moz-transform:rotate3d(1,0,0,-90deg);-ms-transform:rotate3d(1,0,0,-90deg);-o-transform:rotate3d(1,0,0,-90deg);-webkit-transform:rotate3d(1,0,0,-90deg);transform:rotate3d(1,0,0,-90deg)}.html5tooltip-bottom .foldin-to,.html5tooltip-bottom .foldout-to{-moz-transform-origin:center top;-ms-transform-origin:center top;-o-transform-origin:center top;-webkit-transform-origin:center top;transform-origin:center top}.html5tooltip-left .foldin-from,.html5tooltip-right .foldout-from{-moz-transform:rotate3d(0,1,0,-90deg);-ms-transform:rotate3d(0,1,0,-90deg);-o-transform:rotate3d(0,1,0,-90deg);-webkit-transform:rotate3d(0,1,0,-90deg);transform:rotate3d(0,1,0,-90deg)}.html5tooltip-left .foldin-to,.html5tooltip-left .foldout-to{-moz-transform-origin:right center;-ms-transform-origin:right center;-o-transform-origin:right center;-webkit-transform-origin:right center;transform-origin:right center}.html5tooltip-left .foldout-from,.html5tooltip-right .foldin-from{-moz-transform:rotate3d(0,1,0,90deg);-ms-transform:rotate3d(0,1,0,90deg);-o-transform:rotate3d(0,1,0,90deg);-webkit-transform:rotate3d(0,1,0,90deg);transform:rotate3d(0,1,0,90deg)}.html5tooltip-right .foldin-to,.html5tooltip-right .foldout-to{-moz-transform-origin:left center;-ms-transform-origin:left center;-o-transform-origin:left center;-webkit-transform-origin:left center;transform-origin:left center}.html5tooltip-bottom .foldout-from,.html5tooltip-top .foldin-from{-moz-transform:rotate3d(1,0,0,90deg);-ms-transform:rotate3d(1,0,0,90deg);-o-transform:rotate3d(1,0,0,90deg);-webkit-transform:rotate3d(1,0,0,90deg);transform:rotate3d(1,0,0,90deg)}.html5tooltip-top .foldin-to,.html5tooltip-top .foldout-to{-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;-webkit-transform-origin:center bottom;transform-origin:center bottom}.slidein-from{opacity:0}.slidein-to{opacity:1;-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.html5tooltip-bottom .slidein-from{-moz-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);-o-transform:translate3d(0,20px,0);-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}.html5tooltip-left .slidein-from{-moz-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);-o-transform:translate3d(-20px,0,0);-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}.html5tooltip-right .slidein-from{-moz-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);-o-transform:translate3d(20px,0,0);-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}.html5tooltip-top .slidein-from{-moz-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);-o-transform:translate3d(0,-20px,0);-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}.roll-from{opacity:0}.roll-to{opacity:1;-moz-transform:rotate3d(0,0,0,0);-ms-transform:rotate3d(0,0,0,0);-o-transform:rotate3d(0,0,0,0);-webkit-transform:rotate3d(0,0,0,0);transform:rotate3d(0,0,0,0)}.html5tooltip-bottom .roll-from{-moz-transform:rotate3d(0,0,1,-30deg);-ms-transform:rotate3d(0,0,1,-30deg);-o-transform:rotate3d(0,0,1,-30deg);-webkit-transform:rotate3d(0,0,1,-30deg);transform:rotate3d(0,0,1,-30deg)}.html5tooltip-bottom .roll-to{-moz-transform-origin:center top;-ms-transform-origin:center top;-o-transform-origin:center top;-webkit-transform-origin:center top;transform-origin:center top}.html5tooltip-left .roll-from{-moz-transform:rotate3d(0,0,1,30deg);-ms-transform:rotate3d(0,0,1,30deg);-o-transform:rotate3d(0,0,1,30deg);-webkit-transform:rotate3d(0,0,1,30deg);transform:rotate3d(0,0,1,30deg)}.html5tooltip-left .roll-to{-moz-transform-origin:right center;-ms-transform-origin:right center;-o-transform-origin:right center;-webkit-transform-origin:right center;transform-origin:right center}.html5tooltip-right .roll-from{-moz-transform:rotate3d(0,0,1,-30deg);-ms-transform:rotate3d(0,0,1,-30deg);-o-transform:rotate3d(0,0,1,-30deg);-webkit-transform:rotate3d(0,0,1,-30deg);transform:rotate3d(0,0,1,-30deg)}.html5tooltip-right .roll-to{-moz-transform-origin:left center;-ms-transform-origin:left center;-o-transform-origin:left center;-webkit-transform-origin:left center;transform-origin:left center}.html5tooltip-top .roll-from{-moz-transform:rotate3d(0,0,1,30deg);-ms-transform:rotate3d(0,0,1,30deg);-o-transform:rotate3d(0,0,1,30deg);-webkit-transform:rotate3d(0,0,1,30deg);transform:rotate3d(0,0,1,30deg)}.html5tooltip-top .roll-to{-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;-webkit-transform-origin:center bottom;transform-origin:center bottom}.spin-from{opacity:0}.spin-to{opacity:1;-moz-transform:rotate3d(0,0,0,0) translate3d(0,0,0);-ms-transform:rotate3d(0,0,0,0) translate3d(0,0,0);-o-transform:rotate3d(0,0,0,0) translate3d(0,0,0);-webkit-transform:rotate3d(0,0,0,0) translate3d(0,0,0);transform:rotate3d(0,0,0,0) translate3d(0,0,0)}.html5tooltip-bottom .spin-from{-moz-transform:rotate3d(0,1,0,90deg) translate3d(0,20px,0);-ms-transform:rotate3d(0,1,0,90deg) translate3d(0,20px,0);-o-transform:rotate3d(0,1,0,90deg) translate3d(0,20px,0);-webkit-transform:rotate3d(0,1,0,90deg) translate3d(0,20px,0);transform:rotate3d(0,1,0,90deg) translate3d(0,20px,0)}.html5tooltip-left .spin-from{-moz-transform:rotate3d(1,0,0,-90deg) translate3d(-20px,0,0);-ms-transform:rotate3d(1,0,0,-90deg) translate3d(-20px,0,0);-o-transform:rotate3d(1,0,0,-90deg) translate3d(-20px,0,0);-webkit-transform:rotate3d(1,0,0,-90deg) translate3d(-20px,0,0);transform:rotate3d(1,0,0,-90deg) translate3d(-20px,0,0)}.html5tooltip-right .spin-from{-moz-transform:rotate3d(1,0,0,-90deg) translate3d(20px,0,0);-ms-transform:rotate3d(1,0,0,-90deg) translate3d(20px,0,0);-o-transform:rotate3d(1,0,0,-90deg) translate3d(20px,0,0);-webkit-transform:rotate3d(1,0,0,-90deg) translate3d(20px,0,0);transform:rotate3d(1,0,0,-90deg) translate3d(20px,0,0)}.html5tooltip-top .spin-from{-moz-transform:rotate3d(0,1,0,90deg) translate3d(0,-20px,0);-ms-transform:rotate3d(0,1,0,90deg) translate3d(0,-20px,0);-o-transform:rotate3d(0,1,0,90deg) translate3d(0,-20px,0);-webkit-transform:rotate3d(0,1,0,90deg) translate3d(0,-20px,0);transform:rotate3d(0,1,0,90deg) translate3d(0,-20px,0)}
*/
!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof module&&module.exports?module.exports=b():a.html5tooltips=b()}(this,function(){"use strict";function d(a,b){function c(a){var b=f(a).map(function(a){return typeof a}),c={};if("object"===b[0])c=a[0];else if("string"===b[0]){var d=a[0].split(" ");for(var e in d)c[d[e]]=a[1]}else"function"===b[0]&&(c={"":a[0]});return c}function d(a,b){for(var c,e=0;e<a.length;e++){for(var f=0;f<a[e].attributes.length;f++)c=a[e].attributes.item(f).name.replace(/-([a-z])/g,function(a){return a[1].toUpperCase()}),b[c]=b[c]||[],b[c].push(a[e]);d(a[e].children,b)}}function e(a){clearTimeout(m[a]),m[a]=setTimeout(function(){for(var b in k[a])k[a][b](l[a]);if(k[""])for(var b in k[""])k[""][b]()})}function f(a,b){return Array.prototype.slice.call(a,b)}var g=[],h={},i=[],j={},k={},l={},m={};if(b){var n=document.createElement("div");n.innerHTML=b,i=f(n.children),d(i,g)}return h.anchors=g,h.components=a.components={},h.elements=a.elements=i,h.model=a.model=l,h.assignModel=a.assignModel=function(b){h.model=a.model=l=b;for(var c in l)e(c)},h.destroy=a.destroy=function(){for(var a in h.components)h.components[a].destroy&&h.components[a].destroy();for(var b=i.length;b--;)i[b].parentNode&&i[b].parentNode.removeChild(i[b])},h.dispatch=function(b){var c=f(arguments,1);setTimeout(function(){for(var d in j[b])j[b][d].apply(a,c)})},h.on=a.on=function(){var a=c(arguments);for(var b in a)j[b]=j[b]||[],j[b].push(a[b])},h.onModelUpdate=function(){var a=c(arguments);for(var b in a)l[b]=l[b]||null,k[b]=k[b]||[],k[b].push(a[b]),e(b)},h.set=a.set=function(){var a=c(arguments);for(var b in a)l[b]=a[b],e(b)},h}function e(){function e(a,b){q.disableAnimation?b():(a.getBoundingClientRect(),a.classList.add("animating"),b&&b(),setTimeout(function(){a.classList.remove("animating")},q.animateDuration))}function f(a,b,c,d){q.disableAnimation?d&&d():(a.classList.add(b),a.getBoundingClientRect(),a.classList.add("animating"),a.classList.remove(b),a.classList.add(c),d&&d(),setTimeout(function(){a.classList.remove("animating"),a.classList.remove(c)},q.animateDuration))}function g(){return"collapse"!==p.style.visibility&&(p.style.visibility="collapse"),p.style.left="-9999px",p.style.top="-9999px","none"!==n.style.display&&(n.style.display="none",n.style.visibility="collapse",n.style.height="auto"),this}function h(){var a,c;if(k.model.target&&"visible"===p.style.visibility){p.style.width="auto",c=p.getBoundingClientRect();var d=parseInt(q.maxWidth);switch(d&&(p.style.width=c.width>d?d+"px":"auto"),a=k.model.target.getBoundingClientRect(),c=p.getBoundingClientRect(),q.stickTo){case b.stickTo.bottom:p.style.left=a.left+parseInt((a.width-c.width)/2)+"px",p.style.top=a.top+a.height+parseInt(q.stickDistance)+"px";break;case b.stickTo.left:p.style.left=a.left-c.width-parseInt(q.stickDistance)+"px",p.style.top=a.top+(a.height-c.height)/2+"px";break;case b.stickTo.right:p.style.left=a.left+a.width+parseInt(q.stickDistance)+"px",p.style.top=a.top+(a.height-c.height)/2+"px";break;case b.stickTo.top:p.style.left=a.left+(a.width-c.width)/2+"px",p.style.top=a.top-c.height-parseInt(q.stickDistance)+"px"}}}function i(){return"visible"!==p.style.visibility&&(p.style.visibility="visible",setTimeout(function(){h(),f(l,q.animateFunction+"-from",q.animateFunction+"-to")})),this}function j(){if("visible"!==p.style.visibility)p.style.visibility="visible",f(l,q.animateFunction+"-from",q.animateFunction+"-to"),q.contentMore&&(n.style.display="block",n.style.visibility="visible"),h();else if("block"!==n.style.display&&q.contentMore){n.style.display="block",e(p),h();var a=n.getBoundingClientRect().height;n.style.visibility="visible",n.style.height="0px",e(n,function(){n.style.height=a>0?a+"px":"auto"})}return this}var k=new d(this,a),l=k.anchors.box[0],n=(k.anchors.text[0],k.anchors.more[0]),p=(k.anchors.moreText[0],k.elements[0]);g(),"undefined"!=typeof window&&window.addEventListener("scroll",h,!1),k.set(c);var q=k.model;k.onModelUpdate({color:function(a){b.color[a]&&(a=b.color[a],a="rgb("+a.r+", "+a.g+", "+a.b+")"),l.style.backgroundColor=a},contentText:function(a){k.anchors.text[0].innerHTML=a},contentMore:function(a){k.anchors.moreText[0].innerHTML=a},stickTo:function(a){k.elements[0].className="html5tooltip-"+a}}),this.hide=g,this.show=i,this.showMore=j}function h(a,b,c){for(var d,f=c.length;f--;)if(c[f].model.target===a){d=c[f];break}d||(d=new e,c.push(d)),d.set(b),d.set("target",a);var g,h;a.addEventListener("mouseenter",function(){this!==g&&this!==h&&(g=this,document.body.appendChild(d.elements[0]),setTimeout(function(){this===g&&d.show()}.bind(this),d.model.delay))}),a.addEventListener("mouseleave",function(){g=null,this!==h&&(d.hide(),d.elements[0].parentNode&&d.elements[0].parentNode.removeChild(d.elements[0]))}),a.addEventListener("focus",function(){(-1!==["INPUT","TEXTAREA"].indexOf(this.tagName)||null!==this.getAttribute("contenteditable"))&&(h=this,document.body.appendChild(d.elements[0]),d.showMore())}),a.addEventListener("blur",function(){h=null,d.hide(),d.elements[0].parentNode&&d.elements[0].parentNode.removeChild(d.elements[0])})}function i(a,b){for(var f,c=(b||document).getElementsByTagName("*"),d=[],e=0;f=c[e];e++)f.getAttribute(a)&&d.push(f);return d}function j(){i("data-tooltip").forEach(function(a){var b={animateFunction:a.getAttribute("data-tooltip-animate-function")||c.animateFunction,color:a.getAttribute("data-tooltip-color")||"",contentMore:a.getAttribute("data-tooltip-more")||"",contentText:a.getAttribute("data-tooltip")||"",delay:a.getAttribute("data-tooltip-delay")||c.delay,maxWidth:a.getAttribute("data-tooltip-maxwidth")||"auto",stickTo:a.getAttribute("data-tooltip-stickto")||c.stickTo};h(a,b,g)})}function k(a,b){var c=[];try{c=Array.prototype.slice.call((b||document).querySelectorAll(a))}catch(d){}return c}function l(a){a.forEach(function(a){var b=[];a.targetSelector&&(b=k(a.targetSelector)),b.forEach(function(b){h(b,a,f)})})}function n(){document.removeEventListener("DOMContentLoaded",n,!1),window.removeEventListener("load",n,!1),m.refresh()}var a='<div class="html5tooltip" style="box-sizing:border-box;position:fixed;z-index:2147483647"> <div class="html5tooltip-box" box> <div class="html5tooltip-text" text></div> <div class="html5tooltip-more" style="overflow:hidden;" more> <div class="html5tooltip-text" more-text></div> </div> </div></div>',b={animateFunction:{fadeIn:"fadein",foldIn:"foldin",foldOut:"foldout",roll:"roll",scaleIn:"scalein",slideIn:"slidein",spin:"spin"},color:{daffodil:{r:255,g:230,b:23},daisy:{r:250,g:211,b:28},mustard:{r:253,g:183,b:23},"citrus zest":{r:250,g:170,b:33},pumpkin:{r:241,g:117,b:63},tangerine:{r:237,g:87,b:36},salmon:{r:240,g:70,b:57},persimmon:{r:234,g:40,b:48},rouge:{r:188,g:35,b:38},scarlet:{r:140,g:12,b:3},"hot pink":{r:229,g:24,b:93},princess:{r:243,g:132,b:174},petal:{r:250,g:198,b:210},lilac:{r:178,g:150,b:199},lavender:{r:123,g:103,b:174},violet:{r:95,g:53,b:119},cloud:{r:195,g:222,b:241},dream:{r:85,g:190,b:237},gulf:{r:49,g:168,b:224},turquoise:{r:35,g:138,b:204},sky:{r:13,g:96,b:174},indigo:{r:20,g:59,b:134},navy:{r:0,g:27,b:74},"sea foam":{r:125,g:205,b:194},teal:{r:0,g:168,b:168},peacock:{r:18,g:149,b:159},ceadon:{r:193,g:209,b:138},olive:{r:121,g:145,b:85},bamboo:{r:128,g:188,b:66},grass:{r:74,g:160,b:63},kelly:{r:22,g:136,b:74},forrest:{r:0,g:63,b:46},chocolate:{r:56,g:30,b:17},"terra cotta":{r:192,g:92,b:32},camel:{r:191,g:155,b:107},linen:{r:233,g:212,b:167},stone:{r:231,g:230,b:225},smoke:{r:207,g:208,b:210},steel:{r:138,g:139,b:143},slate:{r:119,g:133,b:144},charcoal:{r:71,g:77,b:77},black:{r:5,g:6,b:8},white:{r:255,g:255,b:255},"metalic silver":{r:152,g:162,b:171},"metalic gold":{r:159,g:135,b:89},"metalic copper":{r:140,g:102,b:65}},stickTo:{bottom:"bottom",left:"left",right:"right",top:"top"}},c={animateDuration:300,animateFunction:b.animateFunction.fadeIn,delay:500,disableAnimation:!1,stickTo:b.stickTo.bottom,stickDistance:10},f=[],g=[],m=function(a){Array.isArray(a)||(a=[a]),l(a)};return m.autoinit=m.refresh=function(){j()},m.getTooltipByTarget=function(a){for(var b=f.length;b--;)if(f[b].model.target===a)return f[b];for(var b=g.length;b--;)if(g[b].model.target===a)return g[b]},"undefined"!=typeof window&&("complete"===document.readyState?n():(document.addEventListener("DOMContentLoaded",n,!1),window.addEventListener("load",n,!1)),window.html5tooltipsPredefined||(window.html5tooltipsPredefined=b,window.HTML5TooltipUIComponent=e)),m});
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/mirrors/html5tooltips-js.git
git@gitee.com:mirrors/html5tooltips-js.git
mirrors
html5tooltips-js
html5tooltips-js
master

搜索帮助