From 51ae21afbe0a18ea076a297c14c5e3dc48c65c23 Mon Sep 17 00:00:00 2001
From: Hannah <chia.hannahk@gmail.com>
Date: Sun, 28 Apr 2024 21:16:18 +0700
Subject: [PATCH] Add tooltip to help explain w/ examples of bootstrap

---
 docs/userGuide/syntax/lists.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/userGuide/syntax/lists.md b/docs/userGuide/syntax/lists.md
index 9faf1ad11..13e7a65b0 100644
--- a/docs/userGuide/syntax/lists.md
+++ b/docs/userGuide/syntax/lists.md
@@ -179,7 +179,7 @@ You can utilize any [CSS size unit](https://www.w3schools.com/cssref/css_units.p
 
 If either the `i-width` or the `i-height` of an image is not specified, the unspecified dimension will adjust to maintain the image's original aspect ratio. For example, for an image of size 800x600 (4:3), if `i-width` is set to 400px, its height will be 300px.
 
-**The icon and text's appearance can be further customized by adding a `i-class` and `t-class` attribute respectively.**
+**The icon and text's appearance <tooltip content="Examples: [text classes](https://getbootstrap.com/docs/5.1/utilities/text/#font-size), [badge classes](https://getbootstrap.com/docs/5.1/components/badge/) and more supported by bootstrap">can be further customized</tooltip> by adding a `i-class` and `t-class` attribute respectively.**
 
 <div id="main-example-markbind">
 
@@ -191,7 +191,7 @@ If either the `i-width` or the `i-height` of an image is not specified, the unsp
   * Item 2.1 { icon="fas-question-circle" i-class="badge rounded-pill my-1 bg-success text-white" }
   * Item 2.2
   * Item 2.3 { i-class="badge rounded-pill my-1 bg-primary text-white"}
-* Item 3 { t-class="text-primary my-2" }
+* Item 3 { t-class="text-primary my-2 fst-italic" }
   * Item 3.1 
   * Item 3.2  { icon="fas-question-circle" i-class="badge rounded my-1 bg-danger text-white" }
   * Item 3.3