Fix widget permission tooltip style rules by applying the naming policy properly (#10916)

res/css/components/views/elements/_AppPermission.pcss

@@ -53,8 +53,9 @@ limitations under the License.
             mask-image: url("$(res)/img/feather-customised/help-circle.svg");
         }
     }
+}
 
-    .mx_AppPermission_tooltip {
+.mx_Tooltip.mx_Tooltip--appPermission {
     box-shadow: none;
     background-color: $tooltip-timeline-bg-color;
     color: $tooltip-timeline-fg-color;
@@ -62,7 +63,7 @@ limitations under the License.
     border-radius: 3px;
     padding: 6px 8px;
 
-        &.mx_AppPermission_tooltip--dark {
+    &.mx_Tooltip--appPermission--dark {
         .mx_Tooltip_chevron::after {
             border-right-color: $tooltip-timeline-bg-color;
         }
@@ -73,5 +74,4 @@ limitations under the License.
         padding-left: 2px;
         margin-left: 0;
     }
-    }
 }

src/components/views/elements/AppPermission.tsx

@@ -115,7 +115,7 @@ export default class AppPermission extends React.Component<IProps, IState> {
         const warningTooltip = (
             <TextWithTooltip
                 tooltip={warningTooltipText}
-                tooltipClass="mx_AppPermission_tooltip mx_AppPermission_tooltip--dark"
+                tooltipClass="mx_Tooltip--appPermission mx_Tooltip--appPermission--dark"
             >
                 <span className="mx_AppPermission_helpIcon" />
             </TextWithTooltip>