diff --git a/src/RoomButton.jsx b/src/RoomButton.jsx
index fc7b44b..ee678bb 100644
--- a/src/RoomButton.jsx
+++ b/src/RoomButton.jsx
@@ -75,6 +75,9 @@ export function DropdownButton({ onChange, options, value, children }) {
export function MicButton({ muted, ...rest }) {
return (
+
+ {muted ? "Unmute microphone" : "Mute microphone"}
+
{muted ? : }
);
@@ -83,6 +86,9 @@ export function MicButton({ muted, ...rest }) {
export function VideoButton({ enabled, ...rest }) {
return (
+
+ {enabled ? "Turn off camera" : "Turn on camera"}
+
{enabled ? : }
);
@@ -95,6 +101,9 @@ export function ScreenshareButton({ enabled, className, ...rest }) {
{...rest}
on={enabled}
>
+
+ {enabled ? "Stop sharing screen" : "Share screen"}
+
);
@@ -106,6 +115,7 @@ export function HangupButton({ className, ...rest }) {
className={classNames(styles.hangupButton, className)}
{...rest}
>
+ Leave
);
@@ -143,3 +153,7 @@ export function LayoutToggleButton({ layout, ...rest }) {
);
}
+
+export function ButtonTooltip({ children }) {
+ return
{children}
;
+}
diff --git a/src/RoomButton.module.css b/src/RoomButton.module.css
index baf0314..15818db 100644
--- a/src/RoomButton.module.css
+++ b/src/RoomButton.module.css
@@ -17,6 +17,7 @@ limitations under the License.
.roomButton,
.headerButton,
.dropdownButton {
+ position: relative;
display: flex;
justify-content: center;
align-items: center;
@@ -117,3 +118,22 @@ limitations under the License.
.dropdownActiveItem {
color: #0dbd8b;
}
+
+.buttonTooltip {
+ display: none;
+ background-color: var(--bgColor2);
+ position: absolute;
+ bottom: calc(100% + 6px);
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 8px 10px;
+ color: var(--textColor1);
+ border-radius: 8px;
+ max-width: 135px;
+ width: max-content;
+}
+
+.roomButton:hover .buttonTooltip {
+ display: flex;
+}