├── .gitattributes
├── .gitignore
├── README.mdown
├── css
├── custom-highlight.css
├── themes
│ ├── tooltipster-light.css
│ ├── tooltipster-noir.css
│ ├── tooltipster-punk.css
│ └── tooltipster-shadow.css
└── tooltipster.css
├── home.html
├── jquery.custom-highlight.js
├── jquery.custom-highlight.min.js
└── js
├── jquery-2.1.4.min.js
├── jquery.colourbrightness.min.js
├── jquery.tooltipster.js
└── jquery.tooltipster.min.js
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
4 | # Custom for Visual Studio
5 | *.cs diff=csharp
6 |
7 | # Standard to msysgit
8 | *.doc diff=astextplain
9 | *.DOC diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot diff=astextplain
13 | *.DOT diff=astextplain
14 | *.pdf diff=astextplain
15 | *.PDF diff=astextplain
16 | *.rtf diff=astextplain
17 | *.RTF diff=astextplain
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Windows image file caches
2 | Thumbs.db
3 | ehthumbs.db
4 |
5 | # Folder config file
6 | Desktop.ini
7 |
8 | # Recycle Bin used on file shares
9 | $RECYCLE.BIN/
10 |
11 | # Windows Installer files
12 | *.cab
13 | *.msi
14 | *.msm
15 | *.msp
16 |
17 | # Windows shortcuts
18 | *.lnk
19 |
20 | # =========================
21 | # Operating System Files
22 | # =========================
23 |
24 | # OSX
25 | # =========================
26 |
27 | .DS_Store
28 | .AppleDouble
29 | .LSOverride
30 |
31 | # Thumbnails
32 | ._*
33 |
34 | # Files that might appear in the root of a volume
35 | .DocumentRevisions-V100
36 | .fseventsd
37 | .Spotlight-V100
38 | .TemporaryItems
39 | .Trashes
40 | .VolumeIcon.icns
41 |
42 | # Directories potentially created on remote AFP share
43 | .AppleDB
44 | .AppleDesktop
45 | Network Trash Folder
46 | Temporary Items
47 | .apdisk
48 |
--------------------------------------------------------------------------------
/README.mdown:
--------------------------------------------------------------------------------
1 | # Custom Highlight
2 |
3 | Custom Highlight is a simple jQuery plugin that allows you to build your own custom text highlight actions. Like the wysiwig you see on the Medium editor.
4 |
5 | A quick preview can be found here: [Preview Link](https://htmlpreview.github.io/?https://github.com/Tapha/Custom-Highlight/blob/master/home.html)
6 |
7 | **Featured on:** [JavaScript Weekly](http://javascriptweekly.com/issues/268), [Web Tools Weekly](http://webtoolsweekly.com/archives/issue-132/), [Javascript Digest](https://twitter.com/JavaScriptDaily/status/694100656324485120), [SitePoint JS](https://twitter.com/SitePointJS/status/693482073206714372), [Hacker News](https://news.ycombinator.com/item?id=10952496) & [Reddit](https://www.reddit.com/r/javascript/comments/3xox8m/custom_highlight_an_open_source_jquery_plugin/).
8 |
9 | ## Installation
10 |
11 | 1. Download all of the files.
12 | 2. Include the dependencies, which can be found in the /css & /js folders.
13 | 3. Include the jquery.custom-highlight.js file.
14 | 4. Initialise the Custom-Highlight function like so:
15 |
16 | ```javascript
17 | $('div,p').customHighlight({
18 | actions: [{"newff":"New F"}, {"hewff":"Hew F"}],
19 | position: "left"
20 | });
21 | ```
22 | Making sure to set your custom buttons (function to call on the left, button name on the right) and tooltip position as properties, as can be seen above.
23 |
24 | 5. Add your own custom functions within a script tag at the top of the page like so:
25 |
26 | ```javascript
27 | function newff(span_id) {
28 | alert("Hello everybody! " + span_id);
29 | }
30 | ```
31 |
32 | 6. That's it!
33 |
34 |
35 | ## Usage
36 |
37 | Just set up your buttons in the properties section, with the corresponding the function names and button text, as seen below (function to call on the left, button name on the right).
38 |
39 | ```javascript
40 | $('div,p').customHighlight({
41 | actions: [{"newff":"New F"}, {"hewff":"Hew F"}]
42 | });
43 | ```
44 |
45 | Then just add your own custom functions within a script tag at the top of the page like so, and they will automatically become buttons that link to these functions:
46 |
47 | ```javascript
48 | function newff(span_id) {
49 | alert("Hello everybody! " + span_id);
50 | }
51 | ```
52 | The highlighted text is then available through its ID, which is passed into your custom function when specified, as seen above.
53 |
54 | ## Contributing
55 |
56 | 1. Fork it!
57 | 2. Create your feature branch: `git checkout -b my-new-feature`
58 | 3. Commit your changes: `git commit -am 'Add some feature'`
59 | 4. Push to the branch: `git push origin my-new-feature`
60 | 5. Submit a pull request :D
61 |
62 | ## History
63 |
64 | v0.1 released (21/12/2015)
65 |
66 | ## Credits
67 |
68 | jQuery - [https://jquery.com/](https://jquery.com/)
69 |
70 | Tooltipster - [http://iamceege.github.io/tooltipster/](http://iamceege.github.io/tooltipster/)
71 |
72 | ##TO DO
73 |
74 | - Add ability to remove text coloring.
75 |
76 | ## License
77 |
78 | Apache License
79 | ==============
80 |
81 | _Version 2.0, January 2004_
82 | _<>_
83 |
84 | ### Terms and Conditions for use, reproduction, and distribution
85 |
86 | #### 1. Definitions
87 |
88 | “License” shall mean the terms and conditions for use, reproduction, and
89 | distribution as defined by Sections 1 through 9 of this document.
90 |
91 | “Licensor” shall mean the copyright owner or entity authorized by the copyright
92 | owner that is granting the License.
93 |
94 | “Legal Entity” shall mean the union of the acting entity and all other entities
95 | that control, are controlled by, or are under common control with that entity.
96 | For the purposes of this definition, “control” means **(i)** the power, direct or
97 | indirect, to cause the direction or management of such entity, whether by
98 | contract or otherwise, or **(ii)** ownership of fifty percent (50%) or more of the
99 | outstanding shares, or **(iii)** beneficial ownership of such entity.
100 |
101 | “You” (or “Your”) shall mean an individual or Legal Entity exercising
102 | permissions granted by this License.
103 |
104 | “Source” form shall mean the preferred form for making modifications, including
105 | but not limited to software source code, documentation source, and configuration
106 | files.
107 |
108 | “Object” form shall mean any form resulting from mechanical transformation or
109 | translation of a Source form, including but not limited to compiled object code,
110 | generated documentation, and conversions to other media types.
111 |
112 | “Work” shall mean the work of authorship, whether in Source or Object form, made
113 | available under the License, as indicated by a copyright notice that is included
114 | in or attached to the work (an example is provided in the Appendix below).
115 |
116 | “Derivative Works” shall mean any work, whether in Source or Object form, that
117 | is based on (or derived from) the Work and for which the editorial revisions,
118 | annotations, elaborations, or other modifications represent, as a whole, an
119 | original work of authorship. For the purposes of this License, Derivative Works
120 | shall not include works that remain separable from, or merely link (or bind by
121 | name) to the interfaces of, the Work and Derivative Works thereof.
122 |
123 | “Contribution” shall mean any work of authorship, including the original version
124 | of the Work and any modifications or additions to that Work or Derivative Works
125 | thereof, that is intentionally submitted to Licensor for inclusion in the Work
126 | by the copyright owner or by an individual or Legal Entity authorized to submit
127 | on behalf of the copyright owner. For the purposes of this definition,
128 | “submitted” means any form of electronic, verbal, or written communication sent
129 | to the Licensor or its representatives, including but not limited to
130 | communication on electronic mailing lists, source code control systems, and
131 | issue tracking systems that are managed by, or on behalf of, the Licensor for
132 | the purpose of discussing and improving the Work, but excluding communication
133 | that is conspicuously marked or otherwise designated in writing by the copyright
134 | owner as “Not a Contribution.”
135 |
136 | “Contributor” shall mean Licensor and any individual or Legal Entity on behalf
137 | of whom a Contribution has been received by Licensor and subsequently
138 | incorporated within the Work.
139 |
140 | #### 2. Grant of Copyright License
141 |
142 | Subject to the terms and conditions of this License, each Contributor hereby
143 | grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
144 | irrevocable copyright license to reproduce, prepare Derivative Works of,
145 | publicly display, publicly perform, sublicense, and distribute the Work and such
146 | Derivative Works in Source or Object form.
147 |
148 | #### 3. Grant of Patent License
149 |
150 | Subject to the terms and conditions of this License, each Contributor hereby
151 | grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
152 | irrevocable (except as stated in this section) patent license to make, have
153 | made, use, offer to sell, sell, import, and otherwise transfer the Work, where
154 | such license applies only to those patent claims licensable by such Contributor
155 | that are necessarily infringed by their Contribution(s) alone or by combination
156 | of their Contribution(s) with the Work to which such Contribution(s) was
157 | submitted. If You institute patent litigation against any entity (including a
158 | cross-claim or counterclaim in a lawsuit) alleging that the Work or a
159 | Contribution incorporated within the Work constitutes direct or contributory
160 | patent infringement, then any patent licenses granted to You under this License
161 | for that Work shall terminate as of the date such litigation is filed.
162 |
163 | #### 4. Redistribution
164 |
165 | You may reproduce and distribute copies of the Work or Derivative Works thereof
166 | in any medium, with or without modifications, and in Source or Object form,
167 | provided that You meet the following conditions:
168 |
169 | * **(a)** You must give any other recipients of the Work or Derivative Works a copy of
170 | this License; and
171 | * **(b)** You must cause any modified files to carry prominent notices stating that You
172 | changed the files; and
173 | * **(c)** You must retain, in the Source form of any Derivative Works that You distribute,
174 | all copyright, patent, trademark, and attribution notices from the Source form
175 | of the Work, excluding those notices that do not pertain to any part of the
176 | Derivative Works; and
177 | * **(d)** If the Work includes a “NOTICE” text file as part of its distribution, then any
178 | Derivative Works that You distribute must include a readable copy of the
179 | attribution notices contained within such NOTICE file, excluding those notices
180 | that do not pertain to any part of the Derivative Works, in at least one of the
181 | following places: within a NOTICE text file distributed as part of the
182 | Derivative Works; within the Source form or documentation, if provided along
183 | with the Derivative Works; or, within a display generated by the Derivative
184 | Works, if and wherever such third-party notices normally appear. The contents of
185 | the NOTICE file are for informational purposes only and do not modify the
186 | License. You may add Your own attribution notices within Derivative Works that
187 | You distribute, alongside or as an addendum to the NOTICE text from the Work,
188 | provided that such additional attribution notices cannot be construed as
189 | modifying the License.
190 |
191 | You may add Your own copyright statement to Your modifications and may provide
192 | additional or different license terms and conditions for use, reproduction, or
193 | distribution of Your modifications, or for any such Derivative Works as a whole,
194 | provided Your use, reproduction, and distribution of the Work otherwise complies
195 | with the conditions stated in this License.
196 |
197 | #### 5. Submission of Contributions
198 |
199 | Unless You explicitly state otherwise, any Contribution intentionally submitted
200 | for inclusion in the Work by You to the Licensor shall be under the terms and
201 | conditions of this License, without any additional terms or conditions.
202 | Notwithstanding the above, nothing herein shall supersede or modify the terms of
203 | any separate license agreement you may have executed with Licensor regarding
204 | such Contributions.
205 |
206 | #### 6. Trademarks
207 |
208 | This License does not grant permission to use the trade names, trademarks,
209 | service marks, or product names of the Licensor, except as required for
210 | reasonable and customary use in describing the origin of the Work and
211 | reproducing the content of the NOTICE file.
212 |
213 | #### 7. Disclaimer of Warranty
214 |
215 | Unless required by applicable law or agreed to in writing, Licensor provides the
216 | Work (and each Contributor provides its Contributions) on an “AS IS” BASIS,
217 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied,
218 | including, without limitation, any warranties or conditions of TITLE,
219 | NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are
220 | solely responsible for determining the appropriateness of using or
221 | redistributing the Work and assume any risks associated with Your exercise of
222 | permissions under this License.
223 |
224 | #### 8. Limitation of Liability
225 |
226 | In no event and under no legal theory, whether in tort (including negligence),
227 | contract, or otherwise, unless required by applicable law (such as deliberate
228 | and grossly negligent acts) or agreed to in writing, shall any Contributor be
229 | liable to You for damages, including any direct, indirect, special, incidental,
230 | or consequential damages of any character arising as a result of this License or
231 | out of the use or inability to use the Work (including but not limited to
232 | damages for loss of goodwill, work stoppage, computer failure or malfunction, or
233 | any and all other commercial damages or losses), even if such Contributor has
234 | been advised of the possibility of such damages.
235 |
236 | #### 9. Accepting Warranty or Additional Liability
237 |
238 | While redistributing the Work or Derivative Works thereof, You may choose to
239 | offer, and charge a fee for, acceptance of support, warranty, indemnity, or
240 | other liability obligations and/or rights consistent with this License. However,
241 | in accepting such obligations, You may act only on Your own behalf and on Your
242 | sole responsibility, not on behalf of any other Contributor, and only if You
243 | agree to indemnify, defend, and hold each Contributor harmless for any liability
244 | incurred by, or claims asserted against, such Contributor by reason of your
245 | accepting any such warranty or additional liability.
246 |
247 | _END OF TERMS AND CONDITIONS_
248 |
249 | ### APPENDIX: How to apply the Apache License to your work
250 |
251 | To apply the Apache License to your work, attach the following boilerplate
252 | notice, with the fields enclosed by brackets `[]` replaced with your own
253 | identifying information. (Don't include the brackets!) The text should be
254 | enclosed in the appropriate comment syntax for the file format. We also
255 | recommend that a file or class name and description of purpose be included on
256 | the same “printed page” as the copyright notice for easier identification within
257 | third-party archives.
258 |
259 | Copyright [yyyy] [name of copyright owner]
260 |
261 | Licensed under the Apache License, Version 2.0 (the "License");
262 | you may not use this file except in compliance with the License.
263 | You may obtain a copy of the License at
264 |
265 | http://www.apache.org/licenses/LICENSE-2.0
266 |
267 | Unless required by applicable law or agreed to in writing, software
268 | distributed under the License is distributed on an "AS IS" BASIS,
269 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
270 | See the License for the specific language governing permissions and
271 | limitations under the License.
272 |
273 |
--------------------------------------------------------------------------------
/css/custom-highlight.css:
--------------------------------------------------------------------------------
1 | body {
2 | position: static;
3 | }
4 |
5 | p {
6 | padding: 20px;
7 | line-height: 2.3;
8 | }
9 |
10 | .btn {
11 | color: #ffffff;
12 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
13 | background-color: #5bb75b;
14 | background-image: -moz-linear-gradient(top, #62c462, #51a351);
15 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
16 | background-image: -webkit-linear-gradient(top, #62c462, #51a351);
17 | background-image: -o-linear-gradient(top, #62c462, #51a351);
18 | background-image: linear-gradient(to bottom, #62c462, #51a351);
19 | background-repeat: repeat-x;
20 | border-color: #51a351 #51a351 #387038;
21 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
22 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
23 | filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
24 | display: inline-block;
25 | padding: 4px 12px;
26 | margin-bottom: 0;
27 | font-size: 14px;
28 | line-height: 20px;
29 | text-align: center;
30 | vertical-align: middle;
31 | cursor: pointer;
32 | background-repeat: repeat-x;
33 | border: 1px solid #cccccc;
34 | border-color: #e6e6e6 #e6e6e6 #bfbfbf;
35 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
36 | -webkit-border-radius: 4px;
37 | -moz-border-radius: 4px;
38 | border-radius: 4px;
39 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
40 | filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
41 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
42 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
43 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
44 | }
--------------------------------------------------------------------------------
/css/themes/tooltipster-light.css:
--------------------------------------------------------------------------------
1 | .tooltipster-light {
2 | border-radius: 5px;
3 | border: 1px solid #cccccc;
4 | background: #ededed;
5 | color: #666666;
6 | }
7 | .tooltipster-light .tooltipster-content {
8 | font-family: Arial, sans-serif;
9 | font-size: 14px;
10 | line-height: 16px;
11 | padding: 8px 10px;
12 | }
--------------------------------------------------------------------------------
/css/themes/tooltipster-noir.css:
--------------------------------------------------------------------------------
1 | .tooltipster-noir {
2 | border-radius: 0px;
3 | border: 3px solid #2c2c2c;
4 | background: #fff;
5 | color: #2c2c2c;
6 | }
7 | .tooltipster-noir .tooltipster-content {
8 | font-family: 'Georgia', serif;
9 | font-size: 14px;
10 | line-height: 16px;
11 | padding: 8px 10px;
12 | }
--------------------------------------------------------------------------------
/css/themes/tooltipster-punk.css:
--------------------------------------------------------------------------------
1 | .tooltipster-punk {
2 | border-radius: 5px;
3 | border-bottom: 3px solid #f71169;
4 | background: #2a2a2a;
5 | color: #fff;
6 | }
7 | .tooltipster-punk .tooltipster-content {
8 | font-family: 'Courier', monospace;
9 | font-size: 14px;
10 | line-height: 16px;
11 | padding: 8px 10px;
12 | }
--------------------------------------------------------------------------------
/css/themes/tooltipster-shadow.css:
--------------------------------------------------------------------------------
1 | .tooltipster-shadow {
2 | border-radius: 5px;
3 | background: #fff;
4 | box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
5 | color: #2c2c2c;
6 | }
7 | .tooltipster-shadow .tooltipster-content {
8 | font-family: 'Arial', sans-serif;
9 | font-size: 14px;
10 | line-height: 16px;
11 | padding: 8px 10px;
12 | }
--------------------------------------------------------------------------------
/css/tooltipster.css:
--------------------------------------------------------------------------------
1 | /* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
2 | .tooltipster-default {
3 | border-radius: 5px;
4 | border: 2px solid #000;
5 | background: #4c4c4c;
6 | color: #fff;
7 | }
8 |
9 | /* Use this next selector to style things like font-size and line-height: */
10 | .tooltipster-default .tooltipster-content {
11 | font-family: Arial, sans-serif;
12 | font-size: 14px;
13 | line-height: 16px;
14 | padding: 8px 10px;
15 | overflow: hidden;
16 | }
17 |
18 | /* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
19 | .tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
20 | /* border-color: ... !important; */
21 | }
22 |
23 |
24 | /* If you're using the icon option, use this next selector to style them */
25 | .tooltipster-icon {
26 | cursor: help;
27 | margin-left: 4px;
28 | }
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | /* This is the base styling required to make all Tooltipsters work */
38 | .tooltipster-base {
39 | padding: 0;
40 | font-size: 0;
41 | line-height: 0;
42 | position: absolute;
43 | left: 0;
44 | top: 0;
45 | z-index: 9999999;
46 | pointer-events: none;
47 | width: auto;
48 | overflow: visible;
49 | }
50 | .tooltipster-base .tooltipster-content {
51 | overflow: hidden;
52 | }
53 |
54 |
55 | /* 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. */
56 | .tooltipster-arrow {
57 | display: block;
58 | text-align: center;
59 | width: 100%;
60 | height: 100%;
61 | position: absolute;
62 | top: 0;
63 | left: 0;
64 | z-index: -1;
65 | }
66 | .tooltipster-arrow span, .tooltipster-arrow-border {
67 | display: block;
68 | width: 0;
69 | height: 0;
70 | position: absolute;
71 | }
72 | .tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
73 | border-left: 8px solid transparent !important;
74 | border-right: 8px solid transparent !important;
75 | border-top: 8px solid;
76 | bottom: -7px;
77 | }
78 | .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
79 | border-left: 9px solid transparent !important;
80 | border-right: 9px solid transparent !important;
81 | border-top: 9px solid;
82 | bottom: -7px;
83 | }
84 |
85 | .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
86 | border-left: 8px solid transparent !important;
87 | border-right: 8px solid transparent !important;
88 | border-bottom: 8px solid;
89 | top: -7px;
90 | }
91 | .tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
92 | border-left: 9px solid transparent !important;
93 | border-right: 9px solid transparent !important;
94 | border-bottom: 9px solid;
95 | top: -7px;
96 | }
97 | .tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
98 | left: 0;
99 | right: 0;
100 | margin: 0 auto;
101 | }
102 | .tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
103 | left: 6px;
104 | }
105 | .tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
106 | left: 5px;
107 | }
108 | .tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span {
109 | right: 6px;
110 | }
111 | .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
112 | right: 5px;
113 | }
114 | .tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
115 | border-top: 8px solid transparent !important;
116 | border-bottom: 8px solid transparent !important;
117 | border-left: 8px solid;
118 | top: 50%;
119 | margin-top: -7px;
120 | right: -7px;
121 | }
122 | .tooltipster-arrow-left .tooltipster-arrow-border {
123 | border-top: 9px solid transparent !important;
124 | border-bottom: 9px solid transparent !important;
125 | border-left: 9px solid;
126 | margin-top: -8px;
127 | }
128 | .tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
129 | border-top: 8px solid transparent !important;
130 | border-bottom: 8px solid transparent !important;
131 | border-right: 8px solid;
132 | top: 50%;
133 | margin-top: -7px;
134 | left: -7px;
135 | }
136 | .tooltipster-arrow-right .tooltipster-arrow-border {
137 | border-top: 9px solid transparent !important;
138 | border-bottom: 9px solid transparent !important;
139 | border-right: 9px solid;
140 | margin-top: -8px;
141 | }
142 |
143 |
144 | /* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
145 |
146 | .tooltipster-fade {
147 | opacity: 0;
148 | -webkit-transition-property: opacity;
149 | -moz-transition-property: opacity;
150 | -o-transition-property: opacity;
151 | -ms-transition-property: opacity;
152 | transition-property: opacity;
153 | }
154 | .tooltipster-fade-show {
155 | opacity: 1;
156 | }
157 |
158 | .tooltipster-grow {
159 | -webkit-transform: scale(0,0);
160 | -moz-transform: scale(0,0);
161 | -o-transform: scale(0,0);
162 | -ms-transform: scale(0,0);
163 | transform: scale(0,0);
164 | -webkit-transition-property: -webkit-transform;
165 | -moz-transition-property: -moz-transform;
166 | -o-transition-property: -o-transform;
167 | -ms-transition-property: -ms-transform;
168 | transition-property: transform;
169 | -webkit-backface-visibility: hidden;
170 | }
171 | .tooltipster-grow-show {
172 | -webkit-transform: scale(1,1);
173 | -moz-transform: scale(1,1);
174 | -o-transform: scale(1,1);
175 | -ms-transform: scale(1,1);
176 | transform: scale(1,1);
177 | -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
178 | -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
179 | -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
180 | -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
181 | -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
182 | transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
183 | }
184 |
185 | .tooltipster-swing {
186 | opacity: 0;
187 | -webkit-transform: rotateZ(4deg);
188 | -moz-transform: rotateZ(4deg);
189 | -o-transform: rotateZ(4deg);
190 | -ms-transform: rotateZ(4deg);
191 | transform: rotateZ(4deg);
192 | -webkit-transition-property: -webkit-transform, opacity;
193 | -moz-transition-property: -moz-transform;
194 | -o-transition-property: -o-transform;
195 | -ms-transition-property: -ms-transform;
196 | transition-property: transform;
197 | }
198 | .tooltipster-swing-show {
199 | opacity: 1;
200 | -webkit-transform: rotateZ(0deg);
201 | -moz-transform: rotateZ(0deg);
202 | -o-transform: rotateZ(0deg);
203 | -ms-transform: rotateZ(0deg);
204 | transform: rotateZ(0deg);
205 | -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
206 | -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
207 | -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
208 | -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
209 | -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
210 | transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
211 | }
212 |
213 | .tooltipster-fall {
214 | top: 0;
215 | -webkit-transition-property: top;
216 | -moz-transition-property: top;
217 | -o-transition-property: top;
218 | -ms-transition-property: top;
219 | transition-property: top;
220 | -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
221 | -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
222 | -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
223 | -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
224 | -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
225 | transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
226 | }
227 | .tooltipster-fall-show {
228 | }
229 | .tooltipster-fall.tooltipster-dying {
230 | -webkit-transition-property: all;
231 | -moz-transition-property: all;
232 | -o-transition-property: all;
233 | -ms-transition-property: all;
234 | transition-property: all;
235 | top: 0px !important;
236 | opacity: 0;
237 | }
238 |
239 | .tooltipster-slide {
240 | left: -40px;
241 | -webkit-transition-property: left;
242 | -moz-transition-property: left;
243 | -o-transition-property: left;
244 | -ms-transition-property: left;
245 | transition-property: left;
246 | -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
247 | -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
248 | -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
249 | -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
250 | -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
251 | transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
252 | }
253 | .tooltipster-slide.tooltipster-slide-show {
254 | }
255 | .tooltipster-slide.tooltipster-dying {
256 | -webkit-transition-property: all;
257 | -moz-transition-property: all;
258 | -o-transition-property: all;
259 | -ms-transition-property: all;
260 | transition-property: all;
261 | left: 0px !important;
262 | opacity: 0;
263 | }
264 |
265 |
266 | /* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
267 | .tooltipster-content-changing {
268 | opacity: 0.5;
269 | -webkit-transform: scale(1.1, 1.1);
270 | -moz-transform: scale(1.1, 1.1);
271 | -o-transform: scale(1.1, 1.1);
272 | -ms-transform: scale(1.1, 1.1);
273 | transform: scale(1.1, 1.1);
274 | }
275 |
--------------------------------------------------------------------------------
/home.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |