diff --git a/src/index.html b/src/index.html
index 8e24624..1b2c5f7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,6 +10,7 @@
+
diff --git a/src/static/content/exclusive.jpeg b/src/static/content/exclusive.jpeg
new file mode 100644
index 0000000..d86cbf9
Binary files /dev/null and b/src/static/content/exclusive.jpeg differ
diff --git a/src/static/css/styles.css b/src/static/css/styles.css
index 48f869d..5fe7ea6 100644
--- a/src/static/css/styles.css
+++ b/src/static/css/styles.css
@@ -84,3 +84,23 @@ body {
color: #eee;
transition: 0.2s;
}
+
+.bounce2 {
+ animation: bounce2 2s ease infinite;
+}
+
+@keyframes bounce2 {
+ 0%,
+ 20%,
+ 50%,
+ 80%,
+ 100% {
+ transform: translateY(0);
+ }
+ 40% {
+ transform: translateY(-30px);
+ }
+ 60% {
+ transform: translateY(-15px);
+ }
+}
diff --git a/src/ts/index.ts b/src/ts/index.ts
index 689bcf8..ace0bea 100644
--- a/src/ts/index.ts
+++ b/src/ts/index.ts
@@ -1,11 +1,21 @@
-import tippy from 'tippy.js';
+import tippy, { Props } from 'tippy.js';
+
+const tooltipProfiles: Record> = {
+ default: {},
+ exclusive: {
+ showOnCreate: true,
+ placement: 'bottom',
+ },
+};
const init = () => {
const elementsThatNeedTooltip = document.querySelectorAll('.tippyme');
elementsThatNeedTooltip.forEach((element) => {
const content = element.getAttribute('tooltip-text') ?? 'I forgot ¯_(ツ)_/¯';
- tippy(element, { content });
+ const type = element.getAttribute('tooltip-type') ?? 'default';
+
+ tippy(element, { content, ...tooltipProfiles[type] });
element.toggleAttribute('tooltip-text');
element.classList.toggle('tippyme');