Merge branch 'dev_linda' into develop
Conflicts: app/views/games/show.html.erb
This commit is contained in:
commit
52ebd5b585
|
|
@ -2521,7 +2521,7 @@ module ApplicationHelper
|
|||
|
||||
# Returns the javascript tags that are included in the html layout head
|
||||
def javascript_heads
|
||||
tags = javascript_include_tag('jquery-1.8.3-ui-1.9.2-ujs-2.0.3', 'application', 'jquery.colorbox-min')
|
||||
tags = javascript_include_tag('jquery-1.8.3-ui-1.9.2-ujs-2.0.3', 'application', 'jquery.colorbox-min', 'jquery.min', 'jquery.tooltipster','scripts' )
|
||||
unless User.current.pref.warn_on_leaving_unsaved == '0'
|
||||
tags << "\n".html_safe + javascript_tag("$(window).load(function(){ warnLeavingUnsaved('#{escape_javascript l(:text_warn_on_leaving_unsaved)}'); });")
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="header_con">
|
||||
<div class="fl clearfix new-logo">
|
||||
<%= link_to image_tag("../images/bigdata/new-logo.png",width:"51px", height: "45px", alt:"高校教育大数据服务平台", class:"fl "), home_path %>
|
||||
<%= link_to image_tag("../images/bigdata/bigdata-logo.png",width:"51px", height: "45px", alt:"高校智能化教学与实训平台", class:"fl "), home_path %>
|
||||
<p class="fl ml10 ">高校教育大数据服务平台</p>
|
||||
</div>
|
||||
<a href="<%= user_join_path %>" class="fr new-btn mt10">注册</a>
|
||||
|
|
|
|||
|
|
@ -8,26 +8,26 @@
|
|||
</ul>
|
||||
<div class="cl"></div>
|
||||
<div class="fl" style="width:440px;">
|
||||
<p class="footer_con-p">Email:edudsj@163.com</p>
|
||||
<p class="footer_con-p">Copyright 2007~2016, All Rights Reserved 湘ICP备09019772</p>
|
||||
<p class="footer_con-p">Email:zhiqingcs@163.com</p>
|
||||
<p class="footer_con-p">Copyright 2007~2017, 智擎信息 All Rights Reserved</p>
|
||||
</div>
|
||||
<div class="fr mt20" >
|
||||
<ul class="saoma-box fl mr30">
|
||||
<li>
|
||||
<img src="/images/inner/img-back-weixin.png" width="50" height="50" alt="高校教育大数据服务平台" class="img-show" >
|
||||
<img src="/images/inner/img-back-weixin.png" width="50" height="50" alt="高校智能化教学与实训平台" class="img-show" >
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="saoma-box fl mr30">
|
||||
<li>
|
||||
<img src="/images/inner/img-back-qq.png" width="50" height="50" alt="高校教育大数据服务平台" class="img-show" >
|
||||
<img src="/images/inner/img-back-qq.png" width="50" height="50" alt="高校智能化教学与实训平台" class="img-show" >
|
||||
<ul class="saoma-img-box">
|
||||
<font></font>
|
||||
<li><img src="/images/inner/saoma-qq.jpg" width="191" height="252" alt="高校教育大数据服务平台" class="img-saoma" ></li>
|
||||
<li><img src="/images/inner/saoma-qq.jpg" width="191" height="252" alt="高校智能化教学与实训平台" class="img-saoma" ></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<%= link_to image_tag("/images/bigdata/new-logo.png",width:"50px", height: "50px", alt:"高校教育大数据服务平台", class:"fl"), home_path %>
|
||||
<p class="inner-footer-p-big fr ml30">高校教育大数据服务平台</p>
|
||||
<%= link_to image_tag("/images/bigdata/bigdata-logo.png",width:"50px", height: "50px", alt:"高校智能化教学与实训平台", class:"fl"), home_path %>
|
||||
<p class="inner-footer-p-big fr ml30">高校智能化教学与实训平台</p>
|
||||
</div>
|
||||
<div class="cl"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="header_con">
|
||||
<div class="fl clearfix new-logo">
|
||||
<%= link_to image_tag("../images/bigdata/new-logo.png",width:"51px", height: "45px", alt:"高校教育大数据服务平台", class:"fl "), home_path %>
|
||||
<%= link_to image_tag("../images/bigdata/bigdata-logo.png",width:"51px", height: "45px", alt:"高校智能化教学与实训平台", class:"fl "), home_path %>
|
||||
</div>
|
||||
<ul class="fr inner-nav-user" id="my_account_info">
|
||||
<li>
|
||||
<img src="/images/inner/male.jpg" width="45" height="45" class="inner-nav-user-img"alt="高校教育大数据服务平台"></a>
|
||||
<img src="/images/inner/male.jpg" width="45" height="45" class="inner-nav-user-img"alt="高校智能化教学与实训平台"></a>
|
||||
<font></font>
|
||||
<ul class="my_account_info" id="my_account_info_ul">
|
||||
<font></font>
|
||||
|
|
|
|||
|
|
@ -9,5 +9,5 @@
|
|||
<li ><a href="<%= forums_path %>" target="_blank" class="" > 问吧交流</a></li>
|
||||
<div class="cl"></div>
|
||||
</ul>
|
||||
<p>Copyright 2007~2016, All Rights Reserved 湘ICP备09019772</p>
|
||||
<p>Copyright 2007~2017, 智擎信息 All Rights Reserved</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="header_con">
|
||||
<div class="fl clearfix new-logo">
|
||||
<%= link_to image_tag("/images/bigdata/new-logo.png",width:"45px", height: "45px", alt:"高校教育大数据服务平台", class:"fl "), home_path %>
|
||||
<%= link_to image_tag("/images/bigdata/bigdata-logo",width:"45px", height: "45px", alt:"高校智能化教学与实训平台", class:"fl "), home_path %>
|
||||
</div>
|
||||
<div id="navHomepageSearch">
|
||||
<% name = name%>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<%= favicon %>
|
||||
<%= javascript_heads %>
|
||||
<%= heads_for_theme %>
|
||||
<%= stylesheet_link_tag 'jquery/jquery-ui-1.9.2','css/common', 'css/font-awesome','css/taskstyle','css/structure','scm','css/public', 'css/project','css/popup','repository','css/gantt', 'css/calendar', 'css/moduel', 'css/cssPlus-v.0.2-build', 'css/bigdata-common','css/bigdata-public', 'css/bigdata-popup' %>
|
||||
<%= stylesheet_link_tag 'jquery/jquery-ui-1.9.2','css/common', 'css/font-awesome','css/taskstyle','css/structure','scm','css/public', 'css/project','css/popup','repository','css/gantt', 'css/calendar', 'css/moduel', 'css/cssPlus-v.0.2-build', 'css/bigdata-common','css/bigdata-public', 'css/bigdata-popup', 'css/bigdata-tooltipster' %>
|
||||
<%= call_hook :view_layouts_base_html_head %>
|
||||
<!-- page specific tags -->
|
||||
<%= yield :header_tags -%>
|
||||
|
|
|
|||
|
|
@ -413,7 +413,7 @@
|
|||
<li><a href="<%= forums_path %>" target="_blank" class="fl"> 问吧交流</a></li>
|
||||
</ul>
|
||||
<div class="cl"></div>
|
||||
<p>Copyright 2007~2016 All Rights Reserved<br>湘ICP备09019772</p>
|
||||
<p>Copyright 2007~2017, 智擎信息 All Rights Reserved</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--backtop end-->
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<%= favicon %>
|
||||
<%= javascript_heads %>
|
||||
<%= heads_for_theme %>
|
||||
<%= stylesheet_link_tag 'jquery/jquery-ui-1.9.2','css/common', 'css/bigdata-common','css/bigdata-public', 'css/taskstyle', 'css/structure','scm','css/public', 'css/project','css/popup','repository','css/gantt', 'css/calendar', 'css/moduel', 'css/font-awesome' %>
|
||||
<%= stylesheet_link_tag 'jquery/jquery-ui-1.9.2','css/common', 'css/bigdata-common','css/bigdata-public', 'css/taskstyle', 'css/structure','scm','css/public', 'css/project','css/popup','repository','css/gantt', 'css/calendar', 'css/moduel', 'css/font-awesome', 'css/bigdata-tooltipster' %>
|
||||
<%= call_hook :view_layouts_base_html_head %>
|
||||
<!-- page specific tags -->
|
||||
<%= yield :header_tags -%>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<% applied_user = User.find(ma.applied_user_id) %>
|
||||
<%= link_to image_tag(url_to_avatar(applied_user), :width => "30", :height => "30"), user_path(applied_user), :target => '_blank' %>
|
||||
<% else %>
|
||||
<%= image_tag("/images/trustie_logo1.png", width: "30px", height: "30px", class: "mt3") %>
|
||||
<%= image_tag("/images/bigdata-logo.png", width: "30px", height: "30px", class: "mt3") %>
|
||||
<% end %>
|
||||
</li>
|
||||
<li class="homepageNewsPubType fl">
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
<ul class="homepageNewsList fl">
|
||||
<div class="longMessageWidth">
|
||||
<li class="homepageNewsPortrait fl">
|
||||
<div class="navHomepageLogo fl"><%= image_tag("/images/trustie_logo1.png", width: "30px", height: "30px", class: "mt3") %></div>
|
||||
<div class="navHomepageLogo fl"><%= image_tag("/images/bigdata-logo.png", width: "30px", height: "30px", class: "mt3") %></div>
|
||||
</li>
|
||||
<li class="homepageNewsPubType fl">
|
||||
<span class="newsBlue homepageNewsPublisher">系统提示</span>
|
||||
|
|
|
|||
|
|
@ -649,7 +649,7 @@
|
|||
<ul class="homepageNewsList fl">
|
||||
<div class="longMessageWidth">
|
||||
<li class="homepageNewsPortrait fl">
|
||||
<div class="navHomepageLogo fl"><%= image_tag("/images/trustie_logo1.png", width: "30px", height: "30px", class: "mt3") %></div>
|
||||
<div class="navHomepageLogo fl"><%= image_tag("/images/bigdata-logo.png", width: "30px", height: "30px", class: "mt3") %></div>
|
||||
</li>
|
||||
<li class="homepageNewsPubType fl">
|
||||
<span class="newsBlue homepageNewsPublisher">系统提示</span>
|
||||
|
|
@ -763,7 +763,7 @@
|
|||
<ul class="homepageNewsList fl">
|
||||
<div class="longMessageWidth">
|
||||
<li class="homepageNewsPortrait fl">
|
||||
<div class="navHomepageLogo fl"><%= image_tag("/images/trustie_logo1.png", width: "30px", height: "30px", class: "mt3") %></div>
|
||||
<div class="navHomepageLogo fl"><%= image_tag("/images/bigdata-logo.png", width: "30px", height: "30px", class: "mt3") %></div>
|
||||
</li>
|
||||
<li class="homepageNewsPubType fl">
|
||||
<span class="newsBlue homepageNewsPublisher">系统提示</span>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<ul class="homepageNewsList fl">
|
||||
<div class="longMessageWidth">
|
||||
<li class="homepageNewsPortrait fl">
|
||||
<div class="navHomepageLogo fl"><%= image_tag("/images/trustie_logo1.png", width: "30px", height: "30px", class: "mt3") %></div>
|
||||
<div class="navHomepageLogo fl"><%= image_tag("/images/bigdata-logo.png", width: "30px", height: "30px", class: "mt3") %></div>
|
||||
</li>
|
||||
<li class="homepageNewsPubType fl">
|
||||
<span class='homepageNewsType fl'>管理员同意了您的子域名申请：</span>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<ul class="homepageNewsList fl">
|
||||
<div class="longMessageWidth">
|
||||
<li class="homepageNewsPortrait fl">
|
||||
<div class="navHomepageLogo fl"><%= image_tag("/images/trustie_logo1.png", width: "30px", height: "30px", class: "mt3") %></div>
|
||||
<div class="navHomepageLogo fl"><%= image_tag("/images/bigdata-logo.png", width: "30px", height: "30px", class: "mt3") %></div>
|
||||
</li>
|
||||
<li class="homepageNewsPubType fl">
|
||||
<span style="color: red;float: left">系统消息：</span>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="resources mt10" id="position_<%= system_message.id %>">
|
||||
<div class="homepagePostBrief break_word">
|
||||
<div class="homepagePostPortrait">
|
||||
<%= image_tag("/images/trustie_logo1.png", :width => "50", :height => "50") %>
|
||||
<%= image_tag("/images/bigdata-logo.png", :width => "50", :height => "50") %>
|
||||
</div>
|
||||
<div class="homepagePostDes">
|
||||
<div class="homepagePostTo break_word">
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,900 @@
|
|||
/*
|
||||
|
||||
Tooltipster 2.1 | 2/12/13
|
||||
A rockin' custom tooltip jQuery plugin
|
||||
|
||||
Developed by: Caleb Jacob - calebjacob.com
|
||||
Copyright (C) 2013 Caleb Jacob
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
*/
|
||||
|
||||
;(function ($, window, document, undefined) {
|
||||
|
||||
var pluginName = "tooltipster",
|
||||
defaults = {
|
||||
animation: 'fade',
|
||||
arrow: true,
|
||||
arrowColor: '',
|
||||
content: '',
|
||||
delay: 200,
|
||||
fixedWidth: 0,
|
||||
maxWidth: 0,
|
||||
functionBefore: function(origin, continueTooltip) {
|
||||
continueTooltip();
|
||||
},
|
||||
functionReady: function(origin, tooltip) {},
|
||||
functionAfter: function(origin) {},
|
||||
icon: '(?)',
|
||||
iconDesktop: false,
|
||||
iconTouch: false,
|
||||
iconTheme: '.tooltipster-icon',
|
||||
interactive: false,
|
||||
interactiveTolerance: 350,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
onlyOne: true,
|
||||
position: 'top',
|
||||
speed: 350,
|
||||
timer: 0,
|
||||
theme: '.tooltipster-default',
|
||||
touchDevices: true,
|
||||
trigger: 'hover',
|
||||
updateAnimation: true
|
||||
};
|
||||
|
||||
function Plugin(element, options) {
|
||||
this.element = element;
|
||||
|
||||
this.options = $.extend( {}, defaults, options );
|
||||
|
||||
this._defaults = defaults;
|
||||
this._name = pluginName;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
// we'll use this to detect for mobile devices
|
||||
function is_touch_device() {
|
||||
return !!('ontouchstart' in window);
|
||||
}
|
||||
|
||||
// detecting support for CSS transitions
|
||||
function supportsTransitions() {
|
||||
var b = document.body || document.documentElement;
|
||||
var s = b.style;
|
||||
var p = 'transition';
|
||||
if(typeof s[p] == 'string') {return true; }
|
||||
|
||||
v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
|
||||
p = p.charAt(0).toUpperCase() + p.substr(1);
|
||||
for(var i=0; i<v.length; i++) {
|
||||
if(typeof s[v[i] + p] == 'string') { return true; }
|
||||
}
|
||||
return false;
|
||||
}
|
||||
var transitionSupport = true;
|
||||
if (!supportsTransitions()) {
|
||||
transitionSupport = false;
|
||||
}
|
||||
|
||||
Plugin.prototype = {
|
||||
|
||||
init: function() {
|
||||
var $this = $(this.element);
|
||||
var object = this;
|
||||
var run = true;
|
||||
|
||||
// if this is a touch device and touch devices are disabled, disable the plugin
|
||||
if ((object.options.touchDevices == false) && (is_touch_device())) {
|
||||
run = false;
|
||||
}
|
||||
|
||||
// if IE7 or lower, disable the plugin
|
||||
if (document.all && !document.querySelector) {
|
||||
run = false;
|
||||
}
|
||||
|
||||
if (run == true) {
|
||||
|
||||
// detect if we're changing the tooltip origin to an icon
|
||||
if ((this.options.iconDesktop == true) && (!is_touch_device()) || ((this.options.iconTouch == true) && (is_touch_device()))) {
|
||||
var transferContent = $this.attr('title');
|
||||
$this.removeAttr('title');
|
||||
var theme = object.options.iconTheme;
|
||||
var icon = $('<span class="'+ theme.replace('.', '') +'" title="'+ transferContent +'">'+ this.options.icon +'</span>');
|
||||
icon.insertAfter($this);
|
||||
$this.data('tooltipsterIcon', icon);
|
||||
$this = icon;
|
||||
}
|
||||
|
||||
// first, strip the title off of the element and set it as a data attribute to prevent the default tooltips from popping up
|
||||
var tooltipsterContent = $.trim(object.options.content).length > 0 ? object.options.content : $this.attr('title');
|
||||
$this.data('tooltipsterContent', tooltipsterContent);
|
||||
$this.removeAttr('title');
|
||||
|
||||
// if this is a touch device, add some touch events to launch the tooltip
|
||||
if ((this.options.touchDevices == true) && (is_touch_device())) {
|
||||
$this.bind('touchstart', function(element, options) {
|
||||
object.showTooltip();
|
||||
});
|
||||
}
|
||||
|
||||
// if this is a desktop, deal with adding regular mouse events
|
||||
else {
|
||||
|
||||
// if hover events are set to show and hide the tooltip, attach those events respectively
|
||||
if (this.options.trigger == 'hover') {
|
||||
$this.on('mouseenter.tooltipster', function() {
|
||||
object.showTooltip();
|
||||
});
|
||||
|
||||
// if this is an interactive tooltip, delay getting rid of the tooltip right away so you have a chance to hover on the tooltip
|
||||
if (this.options.interactive == true) {
|
||||
$this.on('mouseleave.tooltipster', function() {
|
||||
var tooltipster = $this.data('tooltipster');
|
||||
var keepAlive = false;
|
||||
|
||||
if ((tooltipster !== undefined) && (tooltipster !== '')) {
|
||||
tooltipster.mouseenter(function() {
|
||||
keepAlive = true;
|
||||
});
|
||||
tooltipster.mouseleave(function() {
|
||||
keepAlive = false;
|
||||
});
|
||||
|
||||
var tolerance = setTimeout(function() {
|
||||
if (keepAlive == true) {
|
||||
tooltipster.mouseleave(function() {
|
||||
object.hideTooltip();
|
||||
});
|
||||
}
|
||||
else {
|
||||
object.hideTooltip();
|
||||
}
|
||||
}, object.options.interactiveTolerance);
|
||||
}
|
||||
else {
|
||||
object.hideTooltip();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// if this is a dumb tooltip, just get rid of it on mouseleave
|
||||
else {
|
||||
$this.on('mouseleave.tooltipster', function() {
|
||||
object.hideTooltip();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// if click events are set to show and hide the tooltip, attach those events respectively
|
||||
if (this.options.trigger == 'click') {
|
||||
$this.on('click.tooltipster', function() {
|
||||
if (($this.data('tooltipster') == '') || ($this.data('tooltipster') == undefined)) {
|
||||
object.showTooltip();
|
||||
}
|
||||
else {
|
||||
object.hideTooltip();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
showTooltip: function(options) {
|
||||
|
||||
var $this = $(this.element);
|
||||
var object = this;
|
||||
|
||||
// detect if we're actually dealing with an icon or the origin itself
|
||||
if ($this.data('tooltipsterIcon') !== undefined) {
|
||||
$this = $this.data('tooltipsterIcon');
|
||||
}
|
||||
|
||||
// if we only want one tooltip open at a time, close all tooltips currently open
|
||||
if (($('.tooltipster-base').not('.tooltipster-dying').length > 0) && (object.options.onlyOne == true)) {
|
||||
$('.tooltipster-base').not('.tooltipster-dying').not($this.data('tooltipster')).each(function() {
|
||||
$(this).addClass('tooltipster-kill');
|
||||
var origin = $(this).data('origin');
|
||||
origin.data('plugin_tooltipster').hideTooltip();
|
||||
});
|
||||
}
|
||||
|
||||
// delay the showing of the tooltip according to the delay time
|
||||
$this.clearQueue().delay(object.options.delay).queue(function() {
|
||||
|
||||
// call our custom function before continuing
|
||||
object.options.functionBefore($this, function() {
|
||||
|
||||
// if this origin already has its tooltip open, keep it open and do nothing else
|
||||
if (($this.data('tooltipster') !== undefined) && ($this.data('tooltipster') !== '')) {
|
||||
var tooltipster = $this.data('tooltipster');
|
||||
|
||||
if (!tooltipster.hasClass('tooltipster-kill')) {
|
||||
|
||||
var animation = 'tooltipster-'+ object.options.animation;
|
||||
|
||||
tooltipster.removeClass('tooltipster-dying');
|
||||
|
||||
if (transitionSupport == true) {
|
||||
tooltipster.clearQueue().addClass(animation +'-show');
|
||||
}
|
||||
|
||||
// if we have a timer set, we need to reset it
|
||||
if (object.options.timer > 0) {
|
||||
var timer = tooltipster.data('tooltipsterTimer');
|
||||
clearTimeout(timer);
|
||||
|
||||
timer = setTimeout(function() {
|
||||
tooltipster.data('tooltipsterTimer', undefined);
|
||||
object.hideTooltip();
|
||||
}, object.options.timer);
|
||||
|
||||
tooltipster.data('tooltipsterTimer', timer);
|
||||
}
|
||||
|
||||
// if this is a touch device, hide the tooltip on body touch
|
||||
if ((object.options.touchDevices == true) && (is_touch_device())) {
|
||||
$('body').bind('touchstart', function(event) {
|
||||
if (object.options.interactive == true) {
|
||||
var touchTarget = $(event.target);
|
||||
var closeTooltip = true;
|
||||
|
||||
touchTarget.parents().each(function() {
|
||||
if ($(this).hasClass('tooltipster-base')) {
|
||||
closeTooltip = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (closeTooltip == true) {
|
||||
object.hideTooltip();
|
||||
$('body').unbind('touchstart');
|
||||
}
|
||||
}
|
||||
else {
|
||||
object.hideTooltip();
|
||||
$('body').unbind('touchstart');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// if the tooltip isn't already open, open that sucker up!
|
||||
else {
|
||||
// disable horizontal scrollbar to keep overflowing tooltips from jacking with it
|
||||
$('body').css('overflow-x', 'hidden');
|
||||
|
||||
// get the content for the tooltip
|
||||
var content = $this.data('tooltipsterContent');
|
||||
|
||||
// get some other settings related to building the tooltip
|
||||
var theme = object.options.theme;
|
||||
var themeClass = theme.replace('.', '');
|
||||
var animation = 'tooltipster-'+object.options.animation;
|
||||
var animationSpeed = '-webkit-transition-duration: '+ object.options.speed +'ms; -webkit-animation-duration: '+ object.options.speed +'ms; -moz-transition-duration: '+ object.options.speed +'ms; -moz-animation-duration: '+ object.options.speed +'ms; -o-transition-duration: '+ object.options.speed +'ms; -o-animation-duration: '+ object.options.speed +'ms; -ms-transition-duration: '+ object.options.speed +'ms; -ms-animation-duration: '+ object.options.speed +'ms; transition-duration: '+ object.options.speed +'ms; animation-duration: '+ object.options.speed +'ms;';
|
||||
var fixedWidth = object.options.fixedWidth > 0 ? 'width:'+ object.options.fixedWidth +'px;' : '';
|
||||
var maxWidth = object.options.maxWidth > 0 ? 'max-width:'+ object.options.maxWidth +'px;' : '';
|
||||
var pointerEvents = object.options.interactive == true ? 'pointer-events: auto;' : '';
|
||||
|
||||
// build the base of our tooltip
|
||||
var tooltipster = $('<div class="tooltipster-base '+ themeClass +' '+ animation +'" style="'+ fixedWidth +' '+ maxWidth +' '+ pointerEvents +' '+ animationSpeed +'"><div class="tooltipster-content">'+content+'</div></div>');
|
||||
tooltipster.appendTo('body');
|
||||
|
||||
// attach the tooltip to its origin
|
||||
$this.data('tooltipster', tooltipster);
|
||||
tooltipster.data('origin', $this);
|
||||
|
||||
// do all the crazy calculations and positioning
|
||||
object.positionTooltip();
|
||||
|
||||
// call our custom callback since the content of the tooltip is now part of the DOM
|
||||
object.options.functionReady($this, tooltipster);
|
||||
|
||||
// animate in the tooltip
|
||||
if (transitionSupport == true) {
|
||||
tooltipster.addClass(animation + '-show');
|
||||
}
|
||||
else {
|
||||
tooltipster.css('display', 'none').removeClass(animation).fadeIn(object.options.speed);
|
||||
}
|
||||
|
||||
// check to see if our tooltip content changes or its origin is removed while the tooltip is alive
|
||||
var currentTooltipContent = content;
|
||||
var contentUpdateChecker = setInterval(function() {
|
||||
var newTooltipContent = $this.data('tooltipsterContent');
|
||||
|
||||
// if this tooltip's origin is removed, remove the tooltip
|
||||
if ($('body').find($this).length == 0) {
|
||||
tooltipster.addClass('tooltipster-dying');
|
||||
object.hideTooltip();
|
||||
}
|
||||
|
||||
// if the content changed for the tooltip, update it
|
||||
else if ((currentTooltipContent !== newTooltipContent) && (newTooltipContent !== '')) {
|
||||
currentTooltipContent = newTooltipContent;
|
||||
|
||||
// set the new content in the tooltip
|
||||
tooltipster.find('.tooltipster-content').html(newTooltipContent);
|
||||
|
||||
// if we want to play a little animation showing the content changed
|
||||
if (object.options.updateAnimation == true) {
|
||||
tooltipster.css({
|
||||
'width': '',
|
||||
'-webkit-transition-duration': object.options.speed + 'ms',
|
||||
'-moz-transition-duration': object.options.speed + 'ms',
|
||||
'-o-transition-duration': object.options.speed + 'ms',
|
||||
'-ms-transition-duration': object.options.speed + 'ms',
|
||||
'transition-duration': object.options.speed + 'ms',
|
||||
'-webkit-transition-property': '-webkit-transform',
|
||||
'-moz-transition-property': '-moz-transform',
|
||||
'-o-transition-property': '-o-transform',
|
||||
'-ms-transition-property': '-ms-transform',
|
||||
'transition-property': 'transform'
|
||||
}).addClass('tooltipster-content-changing');
|
||||
|
||||
// reset the CSS transitions and finish the change animation
|
||||
setTimeout(function() {
|
||||
tooltipster.removeClass('tooltipster-content-changing');
|
||||
// after the changing animation has completed, reset the CSS transitions
|
||||
setTimeout(function() {
|
||||
tooltipster.css({
|
||||
'-webkit-transition-property': '',
|
||||
'-moz-transition-property': '',
|
||||
'-o-transition-property': '',
|
||||
'-ms-transition-property': '',
|
||||
'transition-property': ''
|
||||
});
|
||||
}, object.options.speed);
|
||||
}, object.options.speed);
|
||||
}
|
||||
|
||||
// reposition and resize the tooltip
|
||||
object.positionTooltip();
|
||||
}
|
||||
|
||||
// if the tooltip is closed or origin is removed, clear this interval
|
||||
if (($('body').find(tooltipster).length == 0) || ($('body').find($this).length == 0)) {
|
||||
clearInterval(contentUpdateChecker);
|
||||
}
|
||||
}, 200);
|
||||
|
||||
// if we have a timer set, let the countdown begin!
|
||||
if (object.options.timer > 0) {
|
||||
var timer = setTimeout(function() {
|
||||
tooltipster.data('tooltipsterTimer', undefined);
|
||||
object.hideTooltip();
|
||||
}, object.options.timer + object.options.speed);
|
||||
|
||||
tooltipster.data('tooltipsterTimer', timer);
|
||||
}
|
||||
|
||||
// if this is a touch device, hide the tooltip on body touch
|
||||
if ((object.options.touchDevices == true) && (is_touch_device())) {
|
||||
$('body').bind('touchstart', function(event) {
|
||||
if (object.options.interactive == true) {
|
||||
|
||||
var touchTarget = $(event.target);
|
||||
var closeTooltip = true;
|
||||
|
||||
touchTarget.parents().each(function() {
|
||||
if ($(this).hasClass('tooltipster-base')) {
|
||||
closeTooltip = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (closeTooltip == true) {
|
||||
object.hideTooltip();
|
||||
$('body').unbind('touchstart');
|
||||
}
|
||||
}
|
||||
else {
|
||||
object.hideTooltip();
|
||||
$('body').unbind('touchstart');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// if this is an interactive tooltip activated by a click, close the tooltip when you hover off the tooltip
|
||||
tooltipster.mouseleave(function() {
|
||||
object.hideTooltip();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$this.dequeue();
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
hideTooltip: function(options) {
|
||||
|
||||
var $this = $(this.element);
|
||||
var object = this;
|
||||
|
||||
// detect if we're actually dealing with an icon or the origin itself
|
||||
if ($this.data('tooltipsterIcon') !== undefined) {
|
||||
$this = $this.data('tooltipsterIcon');
|
||||
}
|
||||
|
||||
var tooltipster = $this.data('tooltipster');
|
||||
|
||||
// if the origin has been removed, find all tooltips assigned to death
|
||||
if (tooltipster == undefined) {
|
||||
tooltipster = $('.tooltipster-dying');
|
||||
}
|
||||
|
||||
// clear any possible queues handling delays and such
|
||||
$this.clearQueue();
|
||||
|
||||
if ((tooltipster !== undefined) && (tooltipster !== '')) {
|
||||
|
||||
// detect if we need to clear a timer
|
||||
var timer = tooltipster.data('tooltipsterTimer');
|
||||
if (timer !== undefined) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
|
||||
var animation = 'tooltipster-'+ object.options.animation;
|
||||
|
||||
if (transitionSupport == true) {
|
||||
tooltipster.clearQueue().removeClass(animation +'-show').addClass('tooltipster-dying').delay(object.options.speed).queue(function() {
|
||||
tooltipster.remove();
|
||||
$this.data('tooltipster', '');
|
||||
$('body').css('verflow-x', '');
|
||||
|
||||
// finally, call our custom callback function
|
||||
object.options.functionAfter($this);
|
||||
});
|
||||
}
|
||||
else {
|
||||
tooltipster.clearQueue().addClass('tooltipster-dying').fadeOut(object.options.speed, function() {
|
||||
tooltipster.remove();
|
||||
$this.data('tooltipster', '');
|
||||
$('body').css('verflow-x', '');
|
||||
|
||||
// finally, call our custom callback function
|
||||
object.options.functionAfter($this);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
positionTooltip: function(options) {
|
||||
|
||||
var $this = $(this.element);
|
||||
var object = this;
|
||||
|
||||
// detect if we're actually dealing with an icon or the origin itself
|
||||
if ($this.data('tooltipsterIcon') !== undefined) {
|
||||
$this = $this.data('tooltipsterIcon');
|
||||
}
|
||||
|
||||
if (($this.data('tooltipster') !== undefined) && ($this.data('tooltipster') !== '')) {
|
||||
|
||||
// find tooltipster and reset its width
|
||||
var tooltipster = $this.data('tooltipster');
|
||||
tooltipster.css('width', '');
|
||||
|
||||
// find variables to determine placement
|
||||
var windowWidth = $(window).width();
|
||||
var containerWidth = $this.outerWidth(false);
|
||||
var containerHeight = $this.outerHeight(false);
|
||||
var tooltipWidth = tooltipster.outerWidth(false);
|
||||
var tooltipInnerWidth = tooltipster.innerWidth() + 1; // this +1 stops FireFox from sometimes forcing an additional text line
|
||||
var tooltipHeight = tooltipster.outerHeight(false);
|
||||
var offset = $this.offset();
|
||||
var offsetTop = offset.top;
|
||||
var offsetLeft = offset.left;
|
||||
var resetPosition = undefined;
|
||||
|
||||
// if this is an <area> tag inside a <map>, all hell breaks loose. Recaclulate all the measurements based on coordinates
|
||||
if ($this.is('area')) {
|
||||
var areaShape = $this.attr('shape');
|
||||
var mapName = $this.parent().attr('name');
|
||||
var map = $('img[usemap="#'+ mapName +'"]');
|
||||
var mapOffsetLeft = map.offset().left;
|
||||
var mapOffsetTop = map.offset().top;
|
||||
var areaMeasurements = $this.attr('coords') !== undefined ? $this.attr('coords').split(',') : undefined;
|
||||
|
||||
if (areaShape == 'circle') {
|
||||
var areaLeft = parseInt(areaMeasurements[0]);
|
||||
var areaTop = parseInt(areaMeasurements[1]);
|
||||
var areaWidth = parseInt(areaMeasurements[2]);
|
||||
containerHeight = areaWidth * 2;
|
||||
containerWidth = areaWidth * 2;
|
||||
offsetTop = mapOffsetTop + areaTop - areaWidth;
|
||||
offsetLeft = mapOffsetLeft + areaLeft - areaWidth;
|
||||
}
|
||||
else if (areaShape == 'rect') {
|
||||
var areaLeft = parseInt(areaMeasurements[0]);
|
||||
var areaTop = parseInt(areaMeasurements[1]);
|
||||
var areaRight = parseInt(areaMeasurements[2]);
|
||||
var areaBottom = parseInt(areaMeasurements[3]);
|
||||
containerHeight = areaBottom - areaTop;
|
||||
containerWidth = areaRight - areaLeft;
|
||||
offsetTop = mapOffsetTop + areaTop;
|
||||
offsetLeft = mapOffsetLeft + areaLeft;
|
||||
}
|
||||
else if (areaShape == 'poly') {
|
||||
var areaXs = [];
|
||||
var areaYs = [];
|
||||
var areaSmallestX = 0,
|
||||
areaSmallestY = 0,
|
||||
areaGreatestX = 0,
|
||||
areaGreatestY = 0;
|
||||
var arrayAlternate = 'even';
|
||||
|
||||
for (i = 0; i < areaMeasurements.length; i++) {
|
||||
var areaNumber = parseInt(areaMeasurements[i]);
|
||||
|
||||
if (arrayAlternate == 'even') {
|
||||
if (areaNumber > areaGreatestX) {
|
||||
areaGreatestX = areaNumber;
|
||||
if (i == 0) {
|
||||
areaSmallestX = areaGreatestX;
|
||||
}
|
||||
}
|
||||
|
||||
if (areaNumber < areaSmallestX) {
|
||||
areaSmallestX = areaNumber;
|
||||
}
|
||||
|
||||
arrayAlternate = 'odd';
|
||||
}
|
||||
else {
|
||||
if (areaNumber > areaGreatestY) {
|
||||
areaGreatestY = areaNumber;
|
||||
if (i == 1) {
|
||||
areaSmallestY = areaGreatestY;
|
||||
}
|
||||
}
|
||||
|
||||
if (areaNumber < areaSmallestY) {
|
||||
areaSmallestY = areaNumber;
|
||||
}
|
||||
|
||||
arrayAlternate = 'even';
|
||||
}
|
||||
}
|
||||
|
||||
containerHeight = areaGreatestY - areaSmallestY;
|
||||
containerWidth = areaGreatestX - areaSmallestX;
|
||||
offsetTop = mapOffsetTop + areaSmallestY;
|
||||
offsetLeft = mapOffsetLeft + areaSmallestX;
|
||||
}
|
||||
else {
|
||||
containerHeight = map.outerHeight(false);
|
||||
containerWidth = map.outerWidth(false);
|
||||
offsetTop = mapOffsetTop;
|
||||
offsetLeft = mapOffsetLeft;
|
||||
}
|
||||
}
|
||||
|
||||
// hardcoding the width and removing the padding fixed an issue with the tooltip width collapsing when the window size is small
|
||||
if(object.options.fixedWidth == 0) {
|
||||
tooltipster.css({
|
||||
'width': tooltipInnerWidth + 'px',
|
||||
'padding-left': '0px',
|
||||
'padding-right': '0px'
|
||||
});
|
||||
}
|
||||
|
||||
// our function and global vars for positioning our tooltip
|
||||
var myLeft = 0,
|
||||
myTop = 0;
|
||||
var offsetY = parseInt(object.options.offsetY);
|
||||
var offsetX = parseInt(object.options.offsetX);
|
||||
var arrowConstruct = '';
|
||||
|
||||
// A function to detect if the tooltip is going off the screen horizontally. If so, reposition the crap out of it!
|
||||
function dontGoOffScreenX() {
|
||||
|
||||
var windowLeft = $(window).scrollLeft();
|
||||
|
||||
// If the tooltip goes off the left side of the screen, line it up with the left side of the window
|
||||
if((myLeft - windowLeft) < 0) {
|
||||
var arrowReposition = myLeft - windowLeft;
|
||||
myLeft = windowLeft;
|
||||
|
||||
tooltipster.data('arrow-reposition', arrowReposition);
|
||||
}
|
||||
|
||||
// If the tooltip goes off the right of the screen, line it up with the right side of the window
|
||||
if (((myLeft + tooltipWidth) - windowLeft) > windowWidth) {
|
||||
var arrowReposition = myLeft - ((windowWidth + windowLeft) - tooltipWidth);
|
||||
myLeft = (windowWidth + windowLeft) - tooltipWidth;
|
||||
|
||||
tooltipster.data('arrow-reposition', arrowReposition);
|
||||
}
|
||||
}
|
||||
|
||||
// A function to detect if the tooltip is going off the screen vertically. If so, switch to the opposite!
|
||||
function dontGoOffScreenY(switchTo, resetTo) {
|
||||
// if it goes off the top off the page
|
||||
if(((offsetTop - $(window).scrollTop() - tooltipHeight - offsetY - 12) < 0) && (resetTo.indexOf('top') > -1)) {
|
||||
object.options.position = switchTo;
|
||||
resetPosition = resetTo;
|
||||
}
|
||||
|
||||
// if it goes off the bottom of the page
|
||||
if (((offsetTop + containerHeight + tooltipHeight + 12 + offsetY) > ($(window).scrollTop() + $(window).height())) && (resetTo.indexOf('bottom') > -1)) {
|
||||
object.options.position = switchTo;
|
||||
resetPosition = resetTo;
|
||||
myTop = (offsetTop - tooltipHeight) - offsetY - 12;
|
||||
}
|
||||
}
|
||||
|
||||
if(object.options.position == 'top') {
|
||||
var leftDifference = (offsetLeft + tooltipWidth) - (offsetLeft + containerWidth);
|
||||
myLeft = (offsetLeft + offsetX) - (leftDifference / 2);
|
||||
myTop = (offsetTop - tooltipHeight) - offsetY - 12;
|
||||
dontGoOffScreenX();
|
||||
dontGoOffScreenY('bottom', 'top');
|
||||
}
|
||||
|
||||
if(object.options.position == 'top-left') {
|
||||
myLeft = offsetLeft + offsetX;
|
||||
myTop = (offsetTop - tooltipHeight) - offsetY - 12;
|
||||
dontGoOffScreenX();
|
||||
dontGoOffScreenY('bottom-left', 'top-left');
|
||||
}
|
||||
|
||||
if(object.options.position == 'top-right') {
|
||||
myLeft = (offsetLeft + containerWidth + offsetX) - tooltipWidth;
|
||||
myTop = (offsetTop - tooltipHeight) - offsetY - 12;
|
||||
dontGoOffScreenX();
|
||||
dontGoOffScreenY('bottom-right', 'top-right');
|
||||
}
|
||||
|
||||
if(object.options.position == 'bottom') {
|
||||
var leftDifference = (offsetLeft + tooltipWidth) - (offsetLeft + containerWidth);
|
||||
myLeft = offsetLeft - (leftDifference / 2) + offsetX;
|
||||
myTop = (offsetTop + containerHeight) + offsetY + 12;
|
||||
dontGoOffScreenX();
|
||||
dontGoOffScreenY('top', 'bottom');
|
||||
}
|
||||
|
||||
if(object.options.position == 'bottom-left') {
|
||||
myLeft = offsetLeft + offsetX;
|
||||
myTop = (offsetTop + containerHeight) + offsetY + 12;
|
||||
dontGoOffScreenX();
|
||||
dontGoOffScreenY('top-left', 'bottom-left');
|
||||
}
|
||||
|
||||
if(object.options.position == 'bottom-right') {
|
||||
myLeft = (offsetLeft + containerWidth + offsetX) - tooltipWidth;
|
||||
myTop = (offsetTop + containerHeight) + offsetY + 12;
|
||||
dontGoOffScreenX();
|
||||
dontGoOffScreenY('top-right', 'bottom-right');
|
||||
}
|
||||
|
||||
if(object.options.position == 'left') {
|
||||
myLeft = offsetLeft - offsetX - tooltipWidth - 12;
|
||||
myLeftMirror = offsetLeft + offsetX + containerWidth + 12;
|
||||
var topDifference = (offsetTop + tooltipHeight) - (offsetTop + $this.outerHeight(false));
|
||||
myTop = offsetTop - (topDifference / 2) - offsetY;
|
||||
|
||||
// If the tooltip goes off boths sides of the page
|
||||
if((myLeft < 0) && ((myLeftMirror + tooltipWidth) > windowWidth)) {
|
||||
var borderWidth = parseFloat(tooltipster.css('border-width')) * 2;
|
||||
var newWidth = (tooltipWidth + myLeft) - borderWidth;
|
||||
tooltipster.css('width', newWidth + 'px');
|
||||
|
||||
tooltipHeight = tooltipster.outerHeight(false);
|
||||
myLeft = offsetLeft - offsetX - newWidth - 12 - borderWidth;
|
||||
topDifference = (offsetTop + tooltipHeight) - (offsetTop + $this.outerHeight(false));
|
||||
myTop = offsetTop - (topDifference / 2) - offsetY;
|
||||
}
|
||||
|
||||
// If it only goes off one side, flip it to the other side
|
||||
else if(myLeft < 0) {
|
||||
myLeft = offsetLeft + offsetX + containerWidth + 12;
|
||||
tooltipster.data('arrow-reposition', 'left');
|
||||
}
|
||||
}
|
||||
|
||||
if(object.options.position == 'right') {
|
||||
myLeft = offsetLeft + offsetX + containerWidth + 12;
|
||||
myLeftMirror = offsetLeft - offsetX - tooltipWidth - 12;
|
||||
var topDifference = (offsetTop + tooltipHeight) - (offsetTop + $this.outerHeight(false));
|
||||
myTop = offsetTop - (topDifference / 2) - offsetY;
|
||||
|
||||
// If the tooltip goes off boths sides of the page
|
||||
if(((myLeft + tooltipWidth) > windowWidth) && (myLeftMirror < 0)) {
|
||||
var borderWidth = parseFloat(tooltipster.css('border-width')) * 2;
|
||||
var newWidth = (windowWidth - myLeft) - borderWidth;
|
||||
tooltipster.css('width', newWidth + 'px');
|
||||
|
||||
tooltipHeight = tooltipster.outerHeight(false);
|
||||
topDifference = (offsetTop + tooltipHeight) - (offsetTop + $this.outerHeight(false));
|
||||
myTop = offsetTop - (topDifference / 2) - offsetY;
|
||||
|
||||
}
|
||||
|
||||
// If it only goes off one side, flip it to the other side
|
||||
else if((myLeft + tooltipWidth) > windowWidth) {
|
||||
myLeft = offsetLeft - offsetX - tooltipWidth - 12;
|
||||
tooltipster.data('arrow-reposition', 'right');
|
||||
}
|
||||
}
|
||||
|
||||
// if arrow is set true, style it and append it
|
||||
if (object.options.arrow == true) {
|
||||
|
||||
var arrowClass = 'tooltipster-arrow-' + object.options.position;
|
||||
|
||||
// set color of the arrow
|
||||
if(object.options.arrowColor.length < 1) {
|
||||
var arrowColor = tooltipster.css('background-color');
|
||||
}
|
||||
else {
|
||||
var arrowColor = object.options.arrowColor;
|
||||
}
|
||||
|
||||
// if the tooltip was going off the page and had to re-adjust, we need to update the arrow's position
|
||||
var arrowReposition = tooltipster.data('arrow-reposition');
|
||||
if (!arrowReposition) {
|
||||
arrowReposition = '';
|
||||
}
|
||||
else if (arrowReposition == 'left') {
|
||||
arrowClass = 'tooltipster-arrow-right';
|
||||
arrowReposition = '';
|
||||
}
|
||||
else if (arrowReposition == 'right') {
|
||||
arrowClass = 'tooltipster-arrow-left';
|
||||
arrowReposition = '';
|
||||
}
|
||||
else {
|
||||
arrowReposition = 'left:'+ arrowReposition +'px;';
|
||||
}
|
||||
|
||||
// building the logic to create the border around the arrow of the tooltip
|
||||
if ((object.options.position == 'top') || (object.options.position == 'top-left') || (object.options.position == 'top-right')) {
|
||||
var tooltipBorderWidth = parseFloat(tooltipster.css('border-bottom-width'));
|
||||
var tooltipBorderColor = tooltipster.css('border-bottom-color');
|
||||
}
|
||||
else if ((object.options.position == 'bottom') || (object.options.position == 'bottom-left') || (object.options.position == 'bottom-right')) {
|
||||
var tooltipBorderWidth = parseFloat(tooltipster.css('border-top-width'));
|
||||
var tooltipBorderColor = tooltipster.css('border-top-color');
|
||||
}
|
||||
else if (object.options.position == 'left') {
|
||||
var tooltipBorderWidth = parseFloat(tooltipster.css('border-right-width'));
|
||||
var tooltipBorderColor = tooltipster.css('border-right-color');
|
||||
}
|
||||
else if (object.options.position == 'right') {
|
||||
var tooltipBorderWidth = parseFloat(tooltipster.css('border-left-width'));
|
||||
var tooltipBorderColor = tooltipster.css('border-left-color');
|
||||
}
|
||||
else {
|
||||
var tooltipBorderWidth = parseFloat(tooltipster.css('border-bottom-width'));
|
||||
var tooltipBorderColor = tooltipster.css('border-bottom-color');
|
||||
}
|
||||
|
||||
if (tooltipBorderWidth > 1) {
|
||||
tooltipBorderWidth++;
|
||||
}
|
||||
|
||||
var arrowBorder = '';
|
||||
if (tooltipBorderWidth !== 0) {
|
||||
var arrowBorderSize = '';
|
||||
var arrowBorderColor = 'border-color: '+ tooltipBorderColor +';';
|
||||
if (arrowClass.indexOf('bottom') !== -1) {
|
||||
arrowBorderSize = 'margin-top: -'+ tooltipBorderWidth +'px;';
|
||||
}
|
||||
else if (arrowClass.indexOf('top') !== -1) {
|
||||
arrowBorderSize = 'margin-bottom: -'+ tooltipBorderWidth +'px;';
|
||||
}
|
||||
else if (arrowClass.indexOf('left') !== -1) {
|
||||
arrowBorderSize = 'margin-right: -'+ tooltipBorderWidth +'px;';
|
||||
}
|
||||
else if (arrowClass.indexOf('right') !== -1) {
|
||||
arrowBorderSize = 'margin-left: -'+ tooltipBorderWidth +'px;';
|
||||
}
|
||||
arrowBorder = '<span class="tooltipster-arrow-border" style="'+ arrowBorderSize +' '+ arrowBorderColor +';"></span>';
|
||||
}
|
||||
|
||||
// if the arrow already exists, remove and replace it
|
||||
tooltipster.find('.tooltipster-arrow').remove();
|
||||
|
||||
// build out the arrow and append it
|
||||
arrowConstruct = '<div class="'+ arrowClass +' tooltipster-arrow" style="'+ arrowReposition +'">'+ arrowBorder +'<span style="border-color:'+ arrowColor +';"></span></div>';
|
||||
tooltipster.append(arrowConstruct);
|
||||
}
|
||||
|
||||
// position the tooltip
|
||||
tooltipster.css({'top': myTop+'px', 'left': myLeft+'px'});
|
||||
|
||||
// if we had to change the position of the tooltip so it wouldn't go off screen, reset it
|
||||
if (resetPosition !== undefined) {
|
||||
object.options.position = resetPosition;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function (options) {
|
||||
// better API name spacing by glebtv
|
||||
if (typeof options === 'string') {
|
||||
var $t = this;
|
||||
var newContent = arguments[1];
|
||||
|
||||
// if we're calling a container to interact with API's of tooltips inside it - select all those tooltip origins first
|
||||
if ($t.data('plugin_tooltipster') == undefined) {
|
||||
var query = $t.find('*');
|
||||
$t = $();
|
||||
query.each(function() {
|
||||
if ($(this).data('plugin_tooltipster') !== undefined) {
|
||||
$t.push($(this));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$t.each(function() {
|
||||
switch (options.toLowerCase()) {
|
||||
case 'show':
|
||||
$(this).data('plugin_tooltipster').showTooltip();
|
||||
break;
|
||||
|
||||
case 'hide':
|
||||
$(this).data('plugin_tooltipster').hideTooltip();
|
||||
break;
|
||||
|
||||
case 'destroy':
|
||||
$(this).data('plugin_tooltipster').hideTooltip();
|
||||
$(this).data('plugin_tooltipster', '').attr('title', $t.data('tooltipsterContent')).data('tooltipsterContent', '').data('plugin_tooltipster', '').off('mouseenter.tooltipster mouseleave.tooltipster click.tooltipster');
|
||||
break;
|
||||
|
||||
case 'update':
|
||||
$(this).data('tooltipsterContent', newContent);
|
||||
break;
|
||||
|
||||
case 'reposition':
|
||||
$(this).data('plugin_tooltipster').positionTooltip();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
// attach a tooltipster object to each element if it doesn't already have one
|
||||
return this.each(function () {
|
||||
if (!$.data(this, "plugin_" + pluginName)) {
|
||||
$.data(this, "plugin_" + pluginName, new Plugin( this, options ));
|
||||
}
|
||||
|
||||
var thisOptions = $(this).data('plugin_tooltipster').options;
|
||||
|
||||
if ((thisOptions.iconDesktop == true) && (!is_touch_device()) || ((thisOptions.iconTouch == true) && (is_touch_device()))) {
|
||||
var transferObject = $(this).data('plugin_tooltipster');
|
||||
$(this).next().data('plugin_tooltipster', transferObject);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// hide tooltips on orientation change
|
||||
if (is_touch_device()) {
|
||||
window.addEventListener("orientationchange", function() {
|
||||
if ($('.tooltipster-base').length > 0) {
|
||||
$('.tooltipster-base').each(function() {
|
||||
var origin = $(this).data('origin');
|
||||
origin.data('plugin_tooltipster').hideTooltip();
|
||||
});
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
|
||||
// on window resize, reposition and open tooltips
|
||||
$(window).on('resize.tooltipster', function() {
|
||||
var origin = $('.tooltipster-base').data('origin');
|
||||
|
||||
if ((origin !== null) && (origin !== undefined)) {
|
||||
origin.tooltipster('reposition');
|
||||
}
|
||||
});
|
||||
|
||||
})( jQuery, window, document );
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
$(function() {
|
||||
|
||||
$('.tooltip').not('#welcome .tooltip').tooltipster({
|
||||
offsetY: 2,
|
||||
});
|
||||
$('#welcome .tooltip').tooltipster({
|
||||
offsetY: 2,
|
||||
theme: '.tooltipster-white'
|
||||
});
|
||||
$('#demo-default').tooltipster({
|
||||
offsetY: 2
|
||||
});
|
||||
$('#demo-html').tooltipster({
|
||||
fixedWidth: 300,
|
||||
position: 'right'
|
||||
});
|
||||
$('#demo-theme').tooltipster({
|
||||
animation: 'grow',
|
||||
theme: '.tooltipster-pink'
|
||||
});
|
||||
$('#demo-callback').tooltipster({
|
||||
content: 'Loading...',
|
||||
updateAnimation: false,
|
||||
functionBefore: function(origin, continueTooltip) {
|
||||
continueTooltip();
|
||||
|
||||
if (origin.data('ajax' !== 'cached')) {
|
||||
$.jGFeed('http://ws.audioscrobbler.com/2.0/user/ce3ge/recenttracks.rss?',
|
||||
function(feeds){
|
||||
var content = '';
|
||||
if(!feeds){
|
||||
content = 'Woops - there was an error retrieving my last.fm RSS feed';
|
||||
origin.tooltipster('update', content);
|
||||
}
|
||||
else {
|
||||
content = 'I last listened to: <strong>' + feeds.entries[0].title + '</strong>';
|
||||
origin.tooltipster('update', content).data('ajax', 'cached');
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
},
|
||||
functionAfter: function(origin) {
|
||||
alert('The tooltip has closed!');
|
||||
}
|
||||
});
|
||||
$('#demo-events').tooltipster({
|
||||
trigger: 'click'
|
||||
});
|
||||
$(window).keypress(function() {
|
||||
$('#demo-events').tooltipster('hide');
|
||||
});
|
||||
$('#demo-interact').tooltipster({
|
||||
interactive: true
|
||||
});
|
||||
$('#demo-touch').tooltipster({
|
||||
touchDevices: false
|
||||
});
|
||||
$('#demo-icon').tooltipster({
|
||||
iconDesktop: true,
|
||||
iconTouch: true
|
||||
});
|
||||
$('.tooltipster-light-preview').tooltipster({
|
||||
theme: '.tooltipster-light'
|
||||
});
|
||||
$('.tooltipster-punk-preview').tooltipster({
|
||||
theme: '.tooltipster-punk'
|
||||
});
|
||||
$('.tooltipster-noir-preview').tooltipster({
|
||||
theme: '.tooltipster-noir'
|
||||
});
|
||||
$('.tooltipster-shadow-preview').tooltipster({
|
||||
theme: '.tooltipster-shadow'
|
||||
});
|
||||
|
||||
$('header select').change(function() {
|
||||
var goTo = $(this).val();
|
||||
var section = $('#'+goTo);
|
||||
var offset = section.offset().top;
|
||||
$('html, body').scrollTop(offset);
|
||||
});
|
||||
|
||||
prettyPrint();
|
||||
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
|
||||
|
||||
/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
|
||||
.tooltipster-default {
|
||||
border-radius: 5px;
|
||||
background: #4c4c4c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Use this next selector to style things like font-size and line-height: */
|
||||
.tooltipster-default .tooltipster-content {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
padding: 8px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tooltipster-base {
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
position: absolute;
|
||||
z-index: 9999999;
|
||||
pointer-events: none;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
.tooltipster-base .tooltipster-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
|
||||
.tooltipster-arrow {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.tooltipster-arrow span, .tooltipster-arrow-border {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
|
||||
border-left: 8px solid transparent !important;
|
||||
border-right: 8px solid transparent !important;
|
||||
border-top: 8px solid;
|
||||
bottom: -8px;
|
||||
}
|
||||
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
|
||||
border-left: 9px solid transparent !important;
|
||||
border-right: 9px solid transparent !important;
|
||||
border-top: 9px solid;
|
||||
bottom: -8px;
|
||||
}
|
||||
|
||||
.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
|
||||
border-left: 8px solid transparent !important;
|
||||
border-right: 8px solid transparent !important;
|
||||
border-bottom: 8px solid;
|
||||
top: -8px;
|
||||
}
|
||||
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
|
||||
border-left: 9px solid transparent !important;
|
||||
border-right: 9px solid transparent !important;
|
||||
border-bottom: 9px solid;
|
||||
top: -8px;
|
||||
}
|
||||
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
|
||||
left: 6px;
|
||||
}
|
||||
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
|
||||
left: 5px;
|
||||
}
|
||||
.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span {
|
||||
right: 6px;
|
||||
}
|
||||
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
|
||||
right: 5px;
|
||||
}
|
||||
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
|
||||
border-top: 8px solid transparent !important;
|
||||
border-bottom: 8px solid transparent !important;
|
||||
border-left: 8px solid;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
right: -8px;
|
||||
}
|
||||
.tooltipster-arrow-left .tooltipster-arrow-border {
|
||||
border-top: 9px solid transparent !important;
|
||||
border-bottom: 9px solid transparent !important;
|
||||
border-left: 9px solid;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
|
||||
border-top: 8px solid transparent !important;
|
||||
border-bottom: 8px solid transparent !important;
|
||||
border-right: 8px solid;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
left: -8px;
|
||||
}
|
||||
.tooltipster-arrow-right .tooltipster-arrow-border {
|
||||
border-top: 9px solid transparent !important;
|
||||
border-bottom: 9px solid transparent !important;
|
||||
border-right: 9px solid;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue