fix: Tooltip CSS

motform · Nov 27, 2023 · aaba259 · aaba259
1 parent 46f75e2
commit aaba259
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/resources/public/css/style.css b/resources/public/css/style.css
@@ -13,12 +13,7 @@
 *::before,
 *::after {
   box-sizing: border-box;
-  transition:
-    color 100ms,
-    background-color 100ms,
-    border-color 100ms,
-    font-weight 100ms,
-    font-style 100ms;
+  transition: all 200ms;
 }
 
 input,
@@ -370,7 +365,10 @@ textarea:focus {
   z-index: 1;
   top: 90%;
   left: 50%;
+  transform: translate(-50%, -375%);
   border-radius: 4px;
+  width: fit-content;
+  white-space: nowrap;
 }
 
 .tooltip-large {
@@ -387,6 +385,10 @@ textarea:focus {
   opacity: 100%;
 }
 
+.tooltip-new-story {
+  transform: translate(-50%, -275%);
+}
+
 /* header */
 
 .header {

diff --git a/src/org/motform/multiverse/components/landing.cljs b/src/org/motform/multiverse/components/landing.cljs
@@ -46,8 +46,8 @@
 (defn landing-blurb []
   [:section.landing-blurb.v-stack.gap-half
    [:h1 "Multiverse"]
-   [:p "A vision of the future of interactive generative literature. Non-linearly explore a literary space generated on the fly by OpenAI’s GPT family of machine learning langauge models. Read more "[:a {:href "https://motform.org/multiverse" :target "_blank"} "here"] "."]
-   [:p "Requires an " [:a {:href "https://openai.com/api/" :target "_blank"} "OpenAI API key"] ". You will have to provide your own unless otherwise specified. Multiverse works best in fullscreen mode with toolbars disabled. All data is stored locally."]])
+   [:p "A vision of the future of interactive generative literature. Non-linearly explore a literary space generated on the fly by OpenAI’s GPT family of machine learning langauge models. Read more "[:a {:href "https://motform.org/multiverse" :target "_blank"} "in my case study"] "."]
+   [:p "Requires a GPT-4 enabled " [:a {:href "https://openai.com/api/" :target "_blank"} "OpenAI API key"] ". You will have to provide your own unless otherwise specified. Multiverse works best in fullscreen mode with toolbars disabled. All data is stored locally."]])
 
 (defn landing []
   [:div.landing-container.h-stack.gap-double

diff --git a/src/org/motform/multiverse/components/new_story.cljs b/src/org/motform/multiverse/components/new_story.cljs
@@ -18,8 +18,7 @@
    {:on-pointer-down #(rf/dispatch [:new-story/template template])
     :class (when (= active template) "template-toggle-active shadow-small")}
    [icon]
-   [:span.tooltip.rounded.shadow-small
-    {:style {:left "0" :top "120%"}}
+   [:span.tooltip.rounded.shadow-small.tooltip-new-story
     tooltip]])
 
 (defn templates []