Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a folder for examples including a first, simple tipsy example.html file #178

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Added a folder for examples including a first, simple tipsy example.html file #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e26347a
added example folder and first, simple tipsy example html file
leonar15 Mar 26, 2014
4d86d6d
added support for .tipsy(":visible") method to check if the tool tip …
leonar15 Mar 26, 2014
4589b6f
improved :visible check and updated example2
leonar15 Mar 26, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions examples/example1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tipsy - Example 1</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../src/javascripts/jquery.tipsy.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//init all targets with default
$('.tipsy-target').tipsy();
});
</script>

<link rel="stylesheet" href="../src/stylesheets/tipsy.css" type="text/css" />
<style type="text/css">
html {
background: white;
font-family: sans-serif;

}
</style>
</head>
<body>

<h1>Tipsy - Example 1</h1>
<a class="tipsy-target" original-title="Hello you're looking at tipsy!">Example Target (with defaults)</a>

</body>
</html>
67 changes: 67 additions & 0 deletions examples/example2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tipsy - Example 2</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../src/javascripts/jquery.tipsy.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//init all targets with default
var $target = $('.tipsy-target');

$target
.tipsy({
trigger: "manual",
fade : true
})
.on('click', function(){
var $this = $(this);

if ($this.tipsy(':visible')) {
$this.tipsy('hide');
}else {
$this.tipsy('show');
}
});

$('#check-visible').on('click', function(){
var is_visible = $target.tipsy(':visible') ? 'visible' : 'not visible';

$('#visible-result').html(is_visible);
});
});
</script>

<link rel="stylesheet" href="../src/stylesheets/tipsy.css" type="text/css" />
<style type="text/css">
html {
background: white;
font-family: sans-serif;
}
.tipsy-target{
margin-bottom:20px;
border:1px solid darkgreen;
padding:10px;
}
p{
margin:20px 0;
}
</style>
</head>
<body>

<h1>Tipsy - Example 2</h1>
<p>
This tipsy example covers the usage of <b>.tipsy("visible")</b>
</p>
<a class="tipsy-target" title="Hello you're looking at tipsy!">Example Target (click me to toggle tipsy)</a>
<br />
<br />
<p>
<button id="check-visible">Check .tipsy(":visible")</button>
<span id="visible-result"></span>
</p>
</body>
</html>
16 changes: 14 additions & 2 deletions src/javascripts/jquery.tipsy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,16 @@
}
},

visible: function() {
if (typeof this.$tip == 'undefined') {
return false;
}

return this.$tip.css('opacity') != 0
&& this.$tip.height()
&& this.$tip.width();
},

fixTitle: function() {
var $e = this.$element;
if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') {
Expand Down Expand Up @@ -131,10 +141,12 @@

$.fn.tipsy = function(options) {

var tipsy = this.data('tipsy');
if (options === true) {
return this.data('tipsy');
return tipsy;
} else if (options == ':visible') {
return tipsy.visible();
} else if (typeof options == 'string') {
var tipsy = this.data('tipsy');
if (tipsy) tipsy[options]();
return this;
}
Expand Down