diff --git a/public/chat/index.html b/public/chat/index.html index 8e5292d0..95555aa4 100644 --- a/public/chat/index.html +++ b/public/chat/index.html @@ -83,7 +83,39 @@ background-color: #ddd; /* or any color you prefer */ } - + + /* Styles for the tooltip button */ + .tooltip .tooltip-inner { + max-width: none; /* Override the default max-width */ + width: 250px; /* Set a specific width for your tooltip */ + text-align: justify; + background-color: #f1eaea; /* Change to your preferred background color */ + color: #333; /* Change to your preferred text color */ + } + + .tooltip .tooltip-arrow::before { + border-left-color: #ffffff; /* Match the tooltip-inner background color */ + /* You will need to set the appropriate border color for each arrow direction if you are using multiple tooltip placements */ + } + + #tooltip-button { + padding: 5px; /* Reduce padding */ + font-size: 12px; /* Reduce font size */ + /* Optionally, if you've set a height and width, you can adjust them too. */ + /* height: 20px; */ + /* width: 20px; */ + color: #cbc4c4; /* Adjust the color as needed */ + border: none; + background: transparent; + } + + #tooltip-button:hover { + color: #555; /* Adjust hover color as needed */ + } + #tooltip-button .fa-question-circle { + /* If the icon itself is too large, reduce its size by targeting the font-awesome icon */ + font-size: 16px; /* Adjust the size of the icon as needed */ + } /* Styles for the message container */ #chat1 .message-container { display: flex; @@ -363,6 +395,17 @@

Welcome to BioImage.IO Chatbot

aria-haspopup="true" aria-expanded="false"> Assistants + + @@ -384,27 +427,28 @@

Welcome to BioImage.IO Chatbot

style="flex-grow: 1; border: 1px solid #ced4da; border-radius: .25rem; height: 36px; padding: .375rem .75rem;"> - - + - - - - - @@ -486,6 +530,18 @@

Welcome to BioImage.IO Chatbot

+ + +