Fixed overlapping labels in settings

src/Disp/MenuSections/Settings/CreateOption.js

@@ -13,18 +13,18 @@ import RefreshScale from '../../HelperFunctions/RefreshScale';
 import UpdateColours from '../../HelperFunctions/UpdateColours';
 import Flash from '../../Notifications/Flash';
 import PlaySound from '../../Notifications/Sound';
-import { FavouriteSettings } from '../../VariablesAndData';
+import {
+  FavouriteSettings,
+  SimpleTooltipElements,
+} from '../../VariablesAndData';
 import CookieMonsterPrompt from '../Prompt';
 
 /**
- * This function creates an option-object for the options page
+ * This function creates the favourite setting star object
  * @param 	{string}		config	The name of the option
  * @returns	{object}		div		The option object
  */
-export default function CreatePrefOption(config) {
+function CreateFavouriteStar(config) {
-  const div = document.createElement('div');
-  div.className = 'listing';
-  if (CMOptions.FavouriteSettings === 1) {
   const FavStar = document.createElement('a');
   if (FavouriteSettings.includes(config)) {
     FavStar.innerText = '★';
@@ -36,8 +36,29 @@ export default function CreatePrefOption(config) {
     SaveConfig();
     Game.UpdateMenu();
   };
-    div.appendChild(FavStar);
+  FavStar.onmouseover = function () {
-    div.appendChild(document.createTextNode(' '));
+    Game.tooltip.draw(
+      this,
+      escape(SimpleTooltipElements.FavouriteSettingPlaceholder.innerHTML),
+    );
+  };
+  FavStar.onmouseout = function () {
+    Game.tooltip.hide();
+  };
+  FavStar.appendChild(document.createTextNode(' '));
+  return FavStar;
+}
+
+/**
+ * This function creates an option-object for the options page
+ * @param 	{string}		config	The name of the option
+ * @returns	{object}		div		The option object
+ */
+export default function CreatePrefOption(config) {
+  const div = document.createElement('div');
+  div.className = 'listing';
+  if (CMOptions.FavouriteSettings === 1) {
+    div.appendChild(CreateFavouriteStar(config));
   }
   if (Config[config].type === 'bool') {
     const a = document.createElement('a');
@@ -54,6 +75,7 @@ export default function CreatePrefOption(config) {
     div.appendChild(a);
     const label = document.createElement('label');
     label.textContent = Config[config].desc;
+    label.style.lineHeight = '1.6';
     div.appendChild(label);
     return div;
   }
@@ -104,6 +126,7 @@ export default function CreatePrefOption(config) {
     const span = document.createElement('span');
     span.className = 'option';
     span.textContent = `${Config[config].label} `;
+    span.style.lineHeight = '1.6';
     div.appendChild(span);
     const input = document.createElement('input');
     input.id = ConfigPrefix + config;
@@ -144,6 +167,7 @@ export default function CreatePrefOption(config) {
     div.appendChild(a);
     const label = document.createElement('label');
     label.textContent = Config[config].desc;
+    label.style.lineHeight = '1.6';
     div.appendChild(label);
     return div;
   }
@@ -165,6 +189,7 @@ export default function CreatePrefOption(config) {
     new JsColor(input, { hash: true, position: 'right', onInput: change });
     const label = document.createElement('label');
     label.textContent = Config[config].desc;
+    label.style.lineHeight = '1.6';
     innerSpan.appendChild(label);
     if (config.includes('Flash')) {
       const a = document.createElement('a');
@@ -183,6 +208,7 @@ export default function CreatePrefOption(config) {
     const span = document.createElement('span');
     span.className = 'option';
     span.textContent = `${Config[config].label} `;
+    span.style.lineHeight = '1.6';
     div.appendChild(span);
     const input = document.createElement('input');
     input.id = ConfigPrefix + config;
@@ -201,6 +227,7 @@ export default function CreatePrefOption(config) {
     div.appendChild(document.createTextNode(' '));
     const label = document.createElement('label');
     label.textContent = Config[config].desc;
+    label.style.lineHeight = '1.6';
     div.appendChild(label);
     return div;
   }

src/Disp/VariablesAndData.js

@@ -79,6 +79,11 @@ export const TooltipText = [
     'Cheated cookies might break this formula',
     '250px',
   ],
+  [
+    'FavouriteSettingPlaceholder',
+    "Click to set this setting as favourite and show it in 'favourite' settings at the top of the Cookie Monster Settings",
+    '250px',
+  ],
 ];
 export const SimpleTooltipElements = {};