Merge branch 'main' of https://github.com/mckinsey/vizro into qa/comp…

…onent_library_tests

vizro-core/changelog.d/20241119_155853_huong_li_nguyen_add_bs_tooltip_styling.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/examples/scratch_dev/app.py

@@ -1,15 +1,47 @@
 """Dev app to try things out."""
 
+import pandas as pd
 import vizro.models as vm
+import vizro.plotly.express as px
 from vizro import Vizro
+from vizro._themes._color_values import COLORS
+import dash_bootstrap_components as dbc
+from dash import html
 
+from typing import Literal
+
+from dash import html
+
+import vizro.models as vm
+from vizro import Vizro
+
+
+class Tooltip(vm.VizroBaseModel):
+    type: Literal["tooltip"] = "tooltip"
+    text: str = "This is a tooltip"
+
+    def build(self):
+        return html.Div(
+            [
+                dbc.Button("Button", id=f"{self.id}-tooltip-target"),
+                dbc.Tooltip(
+                    self.text,
+                    target=f"{self.id}-tooltip-target",
+                    is_open=True,
+                ),
+            ]
+        )
+
+
+vm.Page.add_type("components", Tooltip)
 
 page = vm.Page(
-    title="Button Styling",
-    layout=vm.Layout(grid=[[0, 1]]),
+    title="Custom Component",
     components=[
-        vm.Button(),
-        vm.Button(text="Take me home", href="/"),
+        Tooltip(text="Tooltip label"),
+        Tooltip(
+            text="Max. width of tooltip should not exceed 180px - this instance should be used for multiple lines of text for increased legibility."
+        ),
     ],
 )