Repository: jwstegemann/fritz2
Issue: Tooltip arrow initially visibile despite the tooltip being hidden

When rendering a tooltip, it's arrow is always visible until the tooltip is opened/closed for the first time.
This is likely due to the `popper` class being absent on the respective element upon first rendering.

**To Reproduce**
Use any tooltip that has an arrow. You may have a look at the [official demo](https://www.fritz2.dev/headless/tooltip/).

**Expected behavior**
The correct behavior for the arrow would be to stay invisible until the popover is opened.

**Screenshots**
<img width="878" alt="grafik" src="https://github.com/jwstegemann/fritz2/assets/12587543/dd432656-c241-4729-af84-c7a334846510">


Changed files:
headless/src/jsMain/kotlin/dev/fritz2/headless/foundation/PopUpPanel.kt, headless/src/jsMain/kotlin/dev/fritz2/headless/components/tooltip.kt

diff --git a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/tooltip.kt b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/tooltip.kt
index 5b2da4ea..9645a8f4 100644
--- a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/tooltip.kt
+++ b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/tooltip.kt
@@ -19,7 +19,7 @@ import org.w3c.dom.HTMLElement
  */
 
 class Tooltip<C : HTMLElement>(
-    val renderContext: Tag<HTMLElement>,
+    renderContext: Tag<HTMLElement>,
     tagFactory: TagFactory<Tag<C>>,
     classes: String?,
     id: String?,
diff --git a/headless/src/jsMain/kotlin/dev/fritz2/headless/foundation/PopUpPanel.kt b/headless/src/jsMain/kotlin/dev/fritz2/headless/foundation/PopUpPanel.kt
index dded502f..518340a3 100644
--- a/headless/src/jsMain/kotlin/dev/fritz2/headless/foundation/PopUpPanel.kt
+++ b/headless/src/jsMain/kotlin/dev/fritz2/headless/foundation/PopUpPanel.kt
@@ -21,13 +21,14 @@ abstract class PopUpPanel<C : HTMLElement>(
     private val fullWidth: Boolean = true,
     private val reference: Tag<HTMLElement>?,
     private val ariaHasPopup: String,
-    private val popperDiv: HtmlTag<HTMLDivElement> = renderContext.div(POPUP_HIDDEN) {}, //never add other classes to popperDiv, they will be overridden
+    // Never add other classes to popperDiv as they will be overridden:
+    private val popperDiv: HtmlTag<HTMLDivElement> = renderContext.div(POPUP_HIDDEN_CLASSES) {},
     tag: Tag<C> = tagFactory(popperDiv, classes, id, scope) {}
 ) : Tag<C> by tag {
 
     companion object {
-        private const val POPUP_HIDDEN = "fritz2-popup-hidden"
-        private const val POPUP_VISIBLE = "fritz2-popup-visible"
+        private const val FRITZ2_POPUP_HIDDEN = "fritz2-popup-hidden"
+        private const val FRITZ2_POPUP_VISIBLE = "fritz2-popup-visible"
 
         /**
          * Use this class for adding the CSS attribute `position=relative` for a component, that uses [PopUpPanel].
@@ -35,6 +36,9 @@ abstract class PopUpPanel<C : HTMLElement>(
          */
         const val POPUP_RELATIVE = "fritz2-popup-relative"
 
+        private const val POPUP_VISIBLE_CLASSES = "popper $FRITZ2_POPUP_VISIBLE"
+        private const val POPUP_HIDDEN_CLASSES = "popper $FRITZ2_POPUP_HIDDEN"
+
         init {
             addGlobalStyles(
                 listOf(
@@ -65,10 +69,10 @@ abstract class PopUpPanel<C : HTMLElement>(
                 transform: rotate(45deg);
                 background: inherit;
             }""".trimIndent(),
-                    """.popper-arrow::before, .popper.$POPUP_VISIBLE .popper-arrow::before {
+                    """.popper-arrow::before, .popper.$FRITZ2_POPUP_VISIBLE .popper-arrow::before {
                 visibility: visible;
             }""".trimIndent(),
-                    """.popper-arrow::before, .popper.$POPUP_HIDDEN .popper-arrow::before {
+                    """.popper-arrow::before, .popper.$FRITZ2_POPUP_HIDDEN .popper-arrow::before {
                 visibility: hidden;
             }""".trimIndent(),
                     """.popper[data-popper-placement^='bottom'] .popper-arrow::before {
@@ -131,11 +135,11 @@ abstract class PopUpPanel<C : HTMLElement>(
                     """.popper[data-popper-placement='right-end'] > .transform {
                 transform-origin: bottom left;
             }""".trimIndent(),
-                    """.$POPUP_VISIBLE {
+                    """.$FRITZ2_POPUP_VISIBLE {
                 visibility: visible;
                 z-index: 30;
             }""".trimIndent(),
-                    """.$POPUP_HIDDEN {
+                    """.$FRITZ2_POPUP_HIDDEN {
                 visibility: hidden;
             }""".trimIndent(),
                 )
@@ -143,9 +147,6 @@ abstract class PopUpPanel<C : HTMLElement>(
         }
     }
 
-    private val visibleClasses = "popper $POPUP_VISIBLE"
-    private val hiddenClasses = "popper $POPUP_HIDDEN"
-
     var placement: Placement = Placement.auto
     var strategy: Strategy = Strategy.fixed
 
@@ -173,7 +174,7 @@ abstract class PopUpPanel<C : HTMLElement>(
                 reference.domNode, popperDiv.domNode, PopperOptionsInit(
                     placement,
                     strategy,
-                    * modifiers.toTypedArray()
+                    *modifiers.toTypedArray()
                 )
             )
 
@@ -189,15 +190,15 @@ abstract class PopUpPanel<C : HTMLElement>(
                     if (fullWidth) {
                         popperDiv.domNode.style.minWidth = "${reference.domNode.clientWidth}px"
                     }
-                    popperDiv.domNode.className = visibleClasses
+                    popperDiv.domNode.className = POPUP_VISIBLE_CLASSES
                     this@PopUpPanel.waitForAnimation()
                     popper.update()
                     setFocus()
                 } else {
                     this@PopUpPanel.waitForAnimation()
-                    popperDiv.domNode.className = hiddenClasses
+                    popperDiv.domNode.className = POPUP_HIDDEN_CLASSES
                 }
             }
         }
     }
-}
+}
\\ No newline at end of file