lolbox.duowan.com/pcbox/frontend/js/detailTooltip.js

/**
 * [heroDetailTooltip 召唤师详情页英雄数据浮层]
 * @type {Object}
 */
var heroDetailTooltip = {
	wrapper : "",
	/*浮层显示*/
	show : function(obj){
		// var pos = this.getPosition(obj);
		//this.setArrowPosition(obj);
		var posTooltips =  this.setTooltipsPosition(obj);
		this.setArrowPosition( posTooltips );
		this.wrapper.css({
			top: posTooltips.top,
			left: posTooltips.left
		}).show();
	},
	/*浮层消失*/
	hide : function(){
		this.wrapper.hide();
	},
	/*浮层结构修改*/
	html : function(tpl){
		this.wrapper.html(tpl);
	},
	getPosition : function(opt){
		var obj = opt.handler,
			pos = obj.offset();

		return pos;
	},
	setArrowPosition: function(pos){
		var wrapper = this.wrapper,
			arrow = wrapper.find(".tooltips-arrow");
		if( pos.tem > 0 ){
			arrow.css({
				left: wrapper.innerWidth() / 2 - arrow.innerWidth() / 2 - 5
			});
		}
		else{
			arrow.css({
				left: wrapper.innerWidth() / 2 - arrow.innerWidth() / 2 - pos.tem - 5
			});
		}

	},
	setTooltipsPosition : function(obj){
		var pos = {};
		pos.top = obj.offset().top + obj.innerHeight() + 10,
		middleLine = $("body").width() -  obj.offset().left - obj.innerWidth() / 2,
		halfTooltipWidth = this.wrapper.innerWidth() / 2;
		var temWidth = middleLine - halfTooltipWidth;
		pos.tem = temWidth;

		if( temWidth > 0 ){
			pos.left = obj.offset().left - this.wrapper.innerWidth() / 2 + obj.innerWidth() / 2;
		}
		else{
			pos.left = obj.offset().left - this.wrapper.innerWidth() / 2 + obj.innerWidth() / 2 + temWidth ;
		}
		return pos;
	},
	init : function(){
		var _this = this;
		this.wrapper = $("#heropage-hero-tooltips");

	}
}

var heroShareTooltip = {
	wrapper : "",
	/*浮层显示*/
	show : function(obj){
		// var pos = this.getPosition(obj);
		//this.setArrowPosition(obj);
		var posTooltips =  this.setTooltipsPosition(obj);
		this.setArrowPosition( posTooltips );
		this.wrapper.css({
			top: posTooltips.top,
			left: posTooltips.left
		}).show();
	},
	/*浮层消失*/
	hide : function(){
		this.wrapper.hide();
	},
	/*浮层结构修改*/
	html : function(tpl){
		this.wrapper.html(tpl);
	},
	getPosition : function(opt){
		var obj = opt.handler,
			pos = obj.offset();

		return pos;
	},
	setArrowPosition: function(pos){
		var wrapper = this.wrapper,
			arrow = wrapper.find(".tooltips-arrow");
		if( pos.tem > 0 ){
			arrow.css({
				top: wrapper.innerHeight() / 2 - arrow.innerHeight() / 2 + 5
			});
		}
		else{
			arrow.css({
				top: wrapper.innerHeight() / 2 - arrow.innerHeight() / 2 - pos.tem + 5
			});
		}

	},
	setTooltipsPosition : function(obj){
		var pos = {};
		pos.left = obj.offset().left + obj.innerHeight() + 10,
		middleLine = $("body").height() -  obj.offset().top - obj.innerHeight() / 2,
		halfTooltipWidth = this.wrapper.innerHeight() / 2;
		var temWidth = middleLine - halfTooltipWidth;
		pos.tem = temWidth;

		if( temWidth > 0 ){
			pos.top = obj.offset().top - this.wrapper.innerHeight() / 2 + obj.innerHeight() / 2;
		}
		else{
			pos.top = obj.offset().top - this.wrapper.innerHeight() / 2 + obj.innerHeight() / 2 + temWidth ;
		}
		return pos;
	},
	init : function(){
		var _this = this;
		this.wrapper = $("#heropage-hero-sharetips");

	}
}