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 @@ +
@@ -56,6 +57,16 @@

> + + +

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');