tipsy 文件弹窗基于dagre-d3

未做研究，仅保留文件

http://bl.ocks.org/ilyabo/1373263

留一个路径可供参考

tipsy.js

// tipsy, facebook style tooltips for jquery
// version 1.0.0a
// (c) 2008-2010 jason frame [jason@onehackoranother.com]
// released under the MIT license(function($) {function maybeCall(thing, ctx) {return (typeof thing == 'function') ? (thing.call(ctx)) : thing;}function Tipsy(element, options) {this.$element = $(element);this.options = options;this.enabled = true;this.fixTitle();}Tipsy.prototype = {show: function() {var title = this.getTitle();if (title && this.enabled) {var $tip = this.tip();$tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);$tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);var pos = $.extend({}, this.$element.offset(), {width: this.$element[0].offsetWidth || 0,height: this.$element[0].offsetHeight || 0});if (typeof this.$element[0].nearestViewportElement == 'object') {// SVGvar el = this.$element[0];var rect = el.getBoundingClientRect();pos.width = rect.width;pos.height = rect.height;}var actualWidth = $tip[0].offsetWidth,actualHeight = $tip[0].offsetHeight,gravity = maybeCall(this.options.gravity, this.$element[0]);var tp;switch (gravity.charAt(0)) {case 'n':tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};break;case 's':tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};break;case 'e':tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};break;case 'w':tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};break;}if (gravity.length == 2) {if (gravity.charAt(1) == 'w') {tp.left = pos.left + pos.width / 2 - 15;} else {tp.left = pos.left + pos.width / 2 - actualWidth + 15;}}$tip.css(tp).addClass('tipsy-' + gravity);$tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0);if (this.options.className) {$tip.addClass(maybeCall(this.options.className, this.$element[0]));}if (this.options.fade) {$tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});} else {$tip.css({visibility: 'visible', opacity: this.options.opacity});}var t = this;var set_hovered  = function(set_hover){return function(){t.$tip.stop();t.tipHovered = set_hover;if (!set_hover){if (t.options.delayOut === 0) {t.hide();} else {setTimeout(function() {if (t.hoverState == 'out') t.hide(); }, t.options.delayOut);}}};};$tip.hover(set_hovered(true), set_hovered(false));}},hide: function() {if (this.options.fade) {this.tip().stop().fadeOut(function() { $(this).remove(); });} else {this.tip().remove();}},fixTitle: function() {var $e = this.$element;if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') {$e.attr('original-title', $e.attr('title') || '').removeAttr('title');}if (typeof $e.context.nearestViewportElement == 'object'){if ($e.children('title').length){$e.append('<original-title>' + ($e.children('title').text() || '') + '</original-title>').children('title').remove();}}},getTitle: function() {var title, $e = this.$element, o = this.options;this.fixTitle();if (typeof o.title == 'string') {var title_name = o.title == 'title' ? 'original-title' : o.title;if ($e.children(title_name).length){title = $e.children(title_name).html();} else{title = $e.attr(title_name);}} else if (typeof o.title == 'function') {title = o.title.call($e[0]);}title = ('' + title).replace(/(^\s*|\s*$)/, "");return title || o.fallback;},tip: function() {if (!this.$tip) {this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');}return this.$tip;},validate: function() {if (!this.$element[0].parentNode) {this.hide();this.$element = null;this.options = null;}},enable: function() { this.enabled = true; },disable: function() { this.enabled = false; },toggleEnabled: function() { this.enabled = !this.enabled; }};$.fn.tipsy = function(options) {if (options === true) {return this.data('tipsy');} else if (typeof options == 'string') {var tipsy = this.data('tipsy');if (tipsy) tipsy[options]();return this;}options = $.extend({}, $.fn.tipsy.defaults, options);if (options.hoverlock && options.delayOut === 0) {options.delayOut = 100;}function get(ele) {var tipsy = $.data(ele, 'tipsy');if (!tipsy) {tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));$.data(ele, 'tipsy', tipsy);}return tipsy;}function enter() {var tipsy = get(this);tipsy.hoverState = 'in';if (options.delayIn === 0) {tipsy.show();} else {tipsy.fixTitle();setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);}}function leave() {var tipsy = get(this);tipsy.hoverState = 'out';if (options.delayOut === 0) {tipsy.hide();} else {var to = function() {if (!tipsy.tipHovered || !options.hoverlock){if (tipsy.hoverState == 'out') tipsy.hide();}};setTimeout(to, options.delayOut);}}if (options.trigger != 'manual') {var binder = options.live ? 'live' : 'bind',eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';this[binder](eventIn, enter)[binder](eventOut, leave);}return this;};$.fn.tipsy.defaults = {className: null,delayIn: 0,delayOut: 0,fade: false,fallback: '',gravity: 'n',html: false,live: false,offset: 0,opacity: 0.8,title: 'title',trigger: 'hover',hoverlock: false};// Overwrite this method to provide options on a per-element basis.// For example, you could store the gravity in a 'tipsy-gravity' attribute:// return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });// (remember - do not modify 'options' in place!)$.fn.tipsy.elementOptions = function(ele, options) {return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;};$.fn.tipsy.autoNS = function() {return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';};$.fn.tipsy.autoWE = function() {return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';};/*** yields a closure of the supplied parameters, producing a function that takes* no arguments and is suitable for use as an autogravity function like so:** @param margin (int) - distance from the viewable region edge that an*        element should be before setting its tooltip's gravity to be away*        from that edge.* @param prefer (string, e.g. 'n', 'sw', 'w') - the direction to prefer*        if there are no viewable region edges effecting the tooltip's*        gravity. It will try to vary from this minimally, for example,*        if 'sw' is preferred and an element is near the right viewable*        region edge, but not the top edge, it will set the gravity for*        that element's tooltip to be 'se', preserving the southern*        component.*/$.fn.tipsy.autoBounds = function(margin, prefer) {return function() {var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},boundTop = $(document).scrollTop() + margin,boundLeft = $(document).scrollLeft() + margin,$this = $(this);if ($this.offset().top < boundTop) dir.ns = 'n';if ($this.offset().left < boundLeft) dir.ew = 'w';if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';return dir.ns + (dir.ew ? dir.ew : '');};};
})(jQuery);

tipsy.css

.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }.tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }/* Rounded corners */.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }/* Uncomment for shadow */.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }/* Rules to colour arrows */.tipsy-arrow-n { border-bottom-color: #000; }.tipsy-arrow-s { border-top-color: #000; }.tipsy-arrow-e { border-left-color: #000; }.tipsy-arrow-w { border-right-color: #000; }.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }

tipsy 文件弹窗基于dagre-d3相关推荐

Ember Charts – 基于 Ember D3 的图表库
Ember Charts 是一个基于 Ember.js 和 D3.js 的图表库.它包括时间序列.柱状图.饼图.点图,很容易扩展和修改.这些图表组件代表图表交互性和演示的最佳实践,是高度可定制和可扩展 ...
使用minizip解压缩多个文件（基于zlib）
写作目的:之前在网上看到很多人在寻找可以解压缩多个文件的程序,其中有尝试zlib的,使用zlib的源码可以生成后缀为点gz的压缩文件,但是一次只能压缩一个文件,无法压缩多个文件.其实,zlib的源码包 ...
java 正则表达式电话_Java读取文件及基于正则表达式的获取电话号码功能详解...
本文实例讲述了Java读取文件及基于正则表达式的获取电话号码功能.分享给大家供大家参考,具体如下: 1.正则表达式正则表达式,又称正规表示法 . 常规表示法 (英语:Regular Express ...
将CAD模型通过SolidWorks导出机器人URDF文件（基于innfos六轴机械臂）
将CAD模型通过SolidWorks导出机器人URDF文件(基于innfos六轴机械臂) 前言也是初次接触这方面的学习,看了许多的资料,其中古月老师的有个课程挺好的,有机械臂和小车的,我们实验室有机 ...
php提交成功js弹窗,基于JS+HTML实现弹窗提示是否确认提交功能
需求:当点击input按钮时候,弹出确认框,确认后提交到指定url,效果如下分析:这里面要,引入三个库文件,如下是下载地址代码:下载后放入响应的项目目录,最后代码如下 console.log(1) ...
自动生成Mapper文件（基于Mybatis Maven插件）
自动生成Mybatis的Mapper文件工作中使用mybatis时我们需要根据数据表字段创建pojo类.mapper文件以及dao类,并且需要配置它们之间的依赖关系,这样的工作很琐碎和重复,myba ...
java socket 传输压缩文件_java基于socket传输zip文件功能示例
本文实例讲述了java基于socket传输zip文件的方法.分享给大家供大家参考,具体如下: 服务器端程序: import java.io.*; import java.net.*; import j ...
服务器间传文件$d,基于OpenSSH+WinSCP完成Windows服务器之间的文件传输
背景经常会遇到在不同服务器之间传输文件,Linux和Linux之间用命令rsync, windows和linux之间普遍是有图形化界面的ftp软件,老黄平时用的比较多的是FileZilla. Win ...
uniapp 移动端上传文件_基于 uniapp 实现动态路由和动态 Tabbar
本文转载自字节逆旅公众号,感谢作者的好文分享✌️,点击阅读原文可以查看作者的掘金链接. uniapp用来开发app还是比较方便快捷的,官网教程[1]挺细致,几乎所有问题都能找到答案.网上也有不少入 ...

tipsy 文件弹窗基于dagre-d3

tipsy 文件弹窗基于dagre-d3相关推荐

最新文章

热门文章

tipsy 文件 弹窗 基于dagre-d3

tipsy 文件 弹窗 基于dagre-d3相关推荐

最新文章

热门文章

tipsy 文件弹窗基于dagre-d3

tipsy 文件弹窗基于dagre-d3相关推荐