Skip to content

Commit

Permalink
Updated the doc concerning themes and made proper inclusions from the…
Browse files Browse the repository at this point in the history 
… project theme files.
  • Loading branch information
@louisameline
louisameline committed Jan 5, 2014
1 parent f494a59 commit df83d91
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 76 deletions.
63 changes: 6 additions & 57 deletions doc/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -523,18 +523,15 @@ Themes
-------------------------------------
*/

#themes .themes a {
#themes .themes span {
display: inline-block;
padding: 1em;
margin-right: 1em;
margin-bottom: 1em;
opacity: 0.8;
}
#themes a:hover {
opacity: 1;
}

a.tooltipster-default-preview {
.tooltipster-default-preview {
border-radius: 5px;
border: 2px solid #000;
background: #4c4c4c;
Expand All @@ -548,7 +545,7 @@ a.tooltipster-default-preview {
-moz-box-sizing: border-box;
}

a.tooltipster-light-preview {
.tooltipster-light-preview {
border-radius: 5px;
border: 1px solid #cccccc;
background: #ededed;
Expand All @@ -559,20 +556,8 @@ a.tooltipster-light-preview {
padding: 8px 10px;
font-weight: 400;
}
.tooltipster-light {
border-radius: 5px;
border: 1px solid #cccccc;
background: #ededed;
color: #666666;
}
.tooltipster-light .tooltipster-content {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 16px;
padding: 8px 10px;
}

a.tooltipster-punk-preview {
.tooltipster-punk-preview {
border-radius: 5px;
border-bottom: 3px solid #f71169;
background: #2a2a2a;
Expand All @@ -583,20 +568,8 @@ a.tooltipster-punk-preview {
padding: 8px 10px;
font-weight: 400;
}
.tooltipster-punk {
border-radius: 5px;
border-bottom: 3px solid #f71169;
background: #2a2a2a;
color: #fff;
}
.tooltipster-punk .tooltipster-content {
font-family: 'Courier', monospace;
font-size: 14px;
line-height: 16px;
padding: 8px 10px;
}

a.tooltipster-noir-preview {
.tooltipster-noir-preview {
border-radius: 0px;
border: 3px solid #2c2c2c;
background: #fff;
Expand All @@ -607,20 +580,8 @@ a.tooltipster-noir-preview {
padding: 8px 10px;
font-weight: 400;
}
.tooltipster-noir {
border-radius: 0px;
border: 3px solid #2c2c2c;
background: #fff;
color: #2c2c2c;
}
.tooltipster-noir .tooltipster-content {
font-family: 'Georgia', serif;
font-size: 14px;
line-height: 16px;
padding: 8px 10px;
}

a.tooltipster-shadow-preview {
.tooltipster-shadow-preview {
border-radius: 5px;
background: #fff;
box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
Expand All @@ -631,18 +592,6 @@ a.tooltipster-shadow-preview {
padding: 8px 10px;
font-weight: 400;
}
.tooltipster-shadow {
border-radius: 5px;
background: #fff;
box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
color: #2c2c2c;
}
.tooltipster-shadow .tooltipster-content {
font-family: 'Arial', sans-serif;
font-size: 14px;
line-height: 16px;
padding: 8px 10px;
}


/*
Expand Down
12 changes: 6 additions & 6 deletions doc/js/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ $(function() {
});
$('#welcome .tooltip').tooltipster({
offsetY: 2,
theme: '.tooltipster-white'
theme: 'tooltipster-white'
});
$('#demo-default').tooltipster({
offsetY: 2
Expand All @@ -17,7 +17,7 @@ $(function() {
});
$('#demo-theme').tooltipster({
animation: 'grow',
theme: '.tooltipster-pink'
theme: 'tooltipster-pink'
});
$('#demo-callback').tooltipster({
content: 'Loading...',
Expand Down Expand Up @@ -67,16 +67,16 @@ $(function() {
iconTouch: true
});
$('.tooltipster-light-preview').tooltipster({
theme: '.tooltipster-light'
theme: 'tooltipster-light'
});
$('.tooltipster-punk-preview').tooltipster({
theme: '.tooltipster-punk'
theme: 'tooltipster-punk'
});
$('.tooltipster-noir-preview').tooltipster({
theme: '.tooltipster-noir'
theme: 'tooltipster-noir'
});
$('.tooltipster-shadow-preview').tooltipster({
theme: '.tooltipster-shadow'
theme: 'tooltipster-shadow'
});

$('header select').change(function() {
Expand Down
32 changes: 19 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
<link rel="stylesheet" type="text/css" href="doc/css/prettify.css" />
<link rel="stylesheet" type="text/css" href="doc/css/style.css" />
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
<link rel="stylesheet" type="text/css" href="css/themes/tooltipster-light.css" />
<link rel="stylesheet" type="text/css" href="css/themes/tooltipster-noir.css" />
<link rel="stylesheet" type="text/css" href="css/themes/tooltipster-punk.css" />
<link rel="stylesheet" type="text/css" href="css/themes/tooltipster-shadow.css" />

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="doc/js/jquery.jgfeed.js"></script>
Expand Down Expand Up @@ -188,30 +192,32 @@ <h4>Using HTML tags inside your tooltips</h4>
&lt;/body&#62;</pre>

<h4>Customizing Your Tooltipster's Style</h4>
<p>The style of your Tooltipsters can be easily changed by modifying or overriding the default Tooltipster theme in the <strong>tooltipster.css</strong> file. You also have the option to create and attach a brand new theme (comes in handy if you want to use more than one theme at once). To do this, start with this example and add your flair:</p>
<p>The style of your Tooltipsters can be easily changed by editing/overriding the default Tooltipster theme, located in the <strong>css/tooltipster.css</strong> file.</p>
<p>Tooltipster is also packaged with 4 alternative themes to choose from. They are demonstrated at the bottom of this page. To use a theme, just include its css file (located in the css/themes folder) in your page and specify its name in Tooltipster's settings :</p>
<pre class="prettyprint">
$('.tooltip').tooltipster({
theme: 'tooltipster-noir'
});</pre>
<p>And of course, you also have the option to create a brand new theme to suit your needs. To do this, start with the example below and add your flair. When you are done, include and specify your theme just like you would for one of Tooltipster's existing theme.</p>
<pre class="prettyprint lang-css">
/* This is how you would create a theme called "my-custom-theme": */

.my-custom-theme {
border-radius: 5px;
border: 2px solid #000;
background: #4c4c4c;
color: #fff;
}

/* Use this next selector to style things like font-size and line-height: */
.my-custom-theme .tooltipster-content {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 16px;
padding: 8px 10px;
}</pre>
<p>After you have created your new theme, don't forget to specify it in your Tooltipster settings:</p>
<pre class="prettyprint">
$('.tooltip').tooltipster({
theme: 'my-custom-theme'
});</pre>

<h4>Customizing Tooltipster's Functionality</h4>
<p>Tooltipster's options gives you a wide range of variables to tweak your tooltip to your heart's content. To learn more about all of the options, <a href="#options">read the documentation section</a>. Here's just a few of the things you can play with:</p>
<p>Tooltipster's options gives you a wide range of variables to tweak your tooltip to your heart's content. To learn more about all of the options, <a href="#options">read the Options section</a>. Here's just a few of the things you can play with:</p>
<pre class="prettyprint">
$('.tooltip').tooltipster({
animation: 'fade',
Expand Down Expand Up @@ -517,11 +523,11 @@ <h3>Community submitted use cases</h3>
<h2>Themes</h2>
<p>Tired of the same old? Download some rocking themes for your Tooltipsters (or create and <a href="#talk">share</a> your own)! Click to download.</p>
<div class="themes">
<a href="#" class="tooltipster-default-preview tooltip" title="The default theme" target="_blank">Default</a>
<a href="../../github.com/iamceege/tooltipster/blob/master/css/themes/tooltipster-light.html" class="tooltipster-light-preview" title="Light and frisky!" target="_blank">Light</a>
<a href="../../github.com/iamceege/tooltipster/blob/master/css/themes/tooltipster-punk.html" class="tooltipster-punk-preview" title="I will not conform to your old fart ways!" target="_blank">Punk</a>
<a href="../../github.com/iamceege/tooltipster/blob/master/css/themes/tooltipster-noir.html" class="tooltipster-noir-preview" title="Hipsterific!" target="_blank">Noir</a>
<a href="../../github.com/iamceege/tooltipster/blob/master/css/themes/tooltipster-shadow.html" class="tooltipster-shadow-preview" title="Check out my shadow" target="_blank">Shadow</a>
<span class="tooltipster-default-preview tooltip" title="The default theme" target="_blank">Default</span>
<span class="tooltipster-light-preview" title="Light and frisky!" target="_blank">Light</span>
<span class="tooltipster-punk-preview" title="I will not conform to your old fart ways!" target="_blank">Punk</span>
<span class="tooltipster-noir-preview" title="Hipsterific!" target="_blank">Noir</span>
<span class="tooltipster-shadow-preview" title="Check out my shadow" target="_blank">Shadow</span>
</div>
</section>

Expand Down

0 comments on commit df83d91

Please sign in to comment.