diff --git a/src/components/views/elements/TextWithTooltip.js b/src/components/views/elements/TextWithTooltip.tsx
similarity index 71%
rename from src/components/views/elements/TextWithTooltip.js
rename to src/components/views/elements/TextWithTooltip.tsx
index 288d33f71b..b7c2477158 100644
--- a/src/components/views/elements/TextWithTooltip.js
+++ b/src/components/views/elements/TextWithTooltip.tsx
@@ -15,42 +15,44 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Tooltip from "./Tooltip";
+
+interface IProps {
+    class?: string;
+    tooltipClass?: string;
+    tooltip: React.ReactNode;
+    tooltipProps?: {};
+    onClick?: (ev?: React.MouseEvent) => void;
+}
+
+interface IState {
+    hover: boolean;
+}
 
 @replaceableComponent("views.elements.TextWithTooltip")
-export default class TextWithTooltip extends React.Component {
-    static propTypes = {
-        class: PropTypes.string,
-        tooltipClass: PropTypes.string,
-        tooltip: PropTypes.node.isRequired,
-        tooltipProps: PropTypes.object,
-    };
-
-    constructor() {
-        super();
+export default class TextWithTooltip extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
 
         this.state = {
             hover: false,
         };
     }
 
-    onMouseOver = () => {
+    private onMouseOver = (): void => {
         this.setState({ hover: true });
     };
 
-    onMouseLeave = () => {
+    private onMouseLeave = (): void => {
         this.setState({ hover: false });
     };
 
-    render() {
-        const Tooltip = sdk.getComponent("elements.Tooltip");
-
+    public render(): JSX.Element {
         const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props;
 
         return (
-            <span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={className}>
+            <span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick} className={className}>
                 { children }
                 { this.state.hover && <Tooltip
                     {...tooltipProps}