proper tooltips

client/components/combobox.jsx

@@ -11,6 +11,7 @@ const Combobox = createReactClass({
 			trigger     : 'hover',
 			default     : '',
 			placeholder : '',
+			tooltip: '',
 			autoSuggest : {
 				clearAutoSuggestOnClick : true,
 				suggestMethod           : 'includes',
@@ -70,7 +71,8 @@ const Combobox = createReactClass({
 		return (
 			<div className='dropdown-input item'
 				onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
-				onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}>
+				onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}
+				{...(this.props.tooltip ? { 'data-tooltip-bottom': this.props.tooltip } : {})}>
 				<input
 					type='text'
 					onChange={(e)=>this.handleInput(e)}

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -256,7 +256,7 @@ const MetadataEditor = createReactClass({
 
 		return <div className='field language'>
 			<label>language</label>
-			<div className='value'>
+			<div className='value' data-tooltip-right='Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.'>
 				<Combobox trigger='click'
 					className='language-dropdown'
 					default={this.props.metadata.lang || ''}
@@ -273,7 +273,6 @@ const MetadataEditor = createReactClass({
 						filterOn                : ['value', 'detail', 'title']
 					}}
 				/>
-				<small>Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.</small>
 			</div>
 
 		</div>;
@@ -339,14 +338,20 @@ const MetadataEditor = createReactClass({
 				{this.renderThumbnail()}
 			</div>
 
+			<div className="field tags">
+				<label>Tags</label>
+				<div className="value" >
 					<TagInput
 						label='tags'
 						valuePatterns={/^\s*(?:(?:group|meta|system|type)\s*:\s*)?[A-Za-z0-9][A-Za-z0-9 \/\\.&_\-]{0,40}\s*$/}
 						placeholder='add tag' unique={true}
 						values={this.props.metadata.tags}
-				smallText='You may start tags with "type", "system", "group" or "meta" followed by a colon ":", these will be colored in your userpage.'
 						onChange={(e)=>this.handleFieldChange('tags', e)}
+						tooltip='You may start tags with "type", "system", "group" or "meta" followed by a colon ":", these will be colored in your userpage.'
 					/>
+				</div>
+			</div>
+			
 
 			{this.renderLanguageDropdown()}
 
@@ -358,15 +363,22 @@ const MetadataEditor = createReactClass({
 
 			{this.renderAuthors()}
 
+			<div className="field tags">
+				<label>Invited authors</label>
+				<div className="value">
 					<TagInput
 						label='invited authors'
 						valuePatterns={/.+/}
 						validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
 						placeholder='invite author' unique={true}
+						tooltip={`Invited author usernames are case sensitive.
+							After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.`}
 						values={this.props.metadata.invitedAuthors}
-				smallText='Invited author usernames are case sensitive. After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.'
 						onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
 					/>
+				</div>
+			</div>
+			
 
 			<h2>Privacy</h2>
 

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -44,8 +44,6 @@
 		gap            : 10px;
 	}
 
-
-
 	.field {
 		position      : relative;
 		display       : flex;
@@ -62,6 +60,9 @@
 		& > .value {
 			flex           : 1 1 auto;
 			width          : 50px;
+			&[data-tooltip-right] {
+				max-width:380px;
+			}
 			&:invalid { background : #FFB9B9; }
 			small {
 				display     : block;
@@ -110,7 +111,7 @@
 			}
 		}
 
-		&.language .language-dropdown {
+		&.language .value {
 			z-index   : 200;
 			max-width : 150px;
 		}

client/homebrew/editor/tagInput/tagInput.jsx

@@ -1,71 +1,71 @@
-import './tagInput.less';
-import React, { useState, useEffect } from 'react';
-import Combobox from '../../../components/combobox.jsx';
+import "./tagInput.less";
+import React, { useState, useEffect } from "react";
+import Combobox from "../../../components/combobox.jsx";
 
-import tagSuggestionList from './curatedTagSuggestionList.js';
+import tagSuggestionList from "./curatedTagSuggestionList.js";
 
-const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholder = '', smallText = '', onChange })=>{
+const TagInput = ({tooltip, label, valuePatterns, values = [], unique = true, placeholder = "", smallText = "", onChange }) => {
 	const [tagList, setTagList] = useState(
-		values.map((value)=>({
+		values.map((value) => ({
 			value,
-			editing : false,
-			draft   : '',
+			editing: false,
+			draft: "",
 		})),
 	);
 
-	useEffect(()=>{
+	useEffect(() => {
 		const incoming = values || [];
-		const current = tagList.map((t)=>t.value);
+		const current = tagList.map((t) => t.value);
 
-		const changed = incoming.length !== current.length || incoming.some((v, i)=>v !== current[i]);
+		const changed = incoming.length !== current.length || incoming.some((v, i) => v !== current[i]);
 
-		if(changed) {
+		if (changed) {
 			setTagList(
-				incoming.map((value)=>({
+				incoming.map((value) => ({
 					value,
-					editing : false,
+					editing: false,
 				})),
 			);
 		}
 	}, [values]);
 
-	useEffect(()=>{
+	useEffect(() => {
 		onChange?.({
-			target : { value: tagList.map((t)=>t.value) },
+			target: { value: tagList.map((t) => t.value) },
 		});
 	}, [tagList]);
 
 	// substrings to be normalized to the first value on the array
 	const duplicateGroups = [
-		['5e 2024', '5.5e', '5e\'24', '5.24', '5e24', '5.5'],
-		['5e', '5th Edition'],
-		['Dungeons & Dragons', 'Dungeons and Dragons', 'Dungeons n dragons'],
-		['D&D', 'DnD', 'dnd', 'Dnd', 'dnD', 'd&d', 'd&D', 'D&d'],
-		['P2e', 'p2e', 'P2E', 'Pathfinder 2e'],
+		["5e 2024", "5.5e", "5e'24", "5.24", "5e24", "5.5"],
+		["5e", "5th Edition"],
+		["Dungeons & Dragons", "Dungeons and Dragons", "Dungeons n dragons"],
+		["D&D", "DnD", "dnd", "Dnd", "dnD", "d&d", "d&D", "D&d"],
+		["P2e", "p2e", "P2E", "Pathfinder 2e"],
 	];
 
-	const normalizeValue = (input)=>{
+	const normalizeValue = (input) => {
 		const lowerInput = input.toLowerCase();
 		let normalizedTag = input;
 
 		for (const group of duplicateGroups) {
 			for (const tag of group) {
-				if(!tag) continue;
+				if (!tag) continue;
 
 				const index = lowerInput.indexOf(tag.toLowerCase());
-				if(index !== -1) {
+				if (index !== -1) {
 					normalizedTag = input.slice(0, index) + group[0] + input.slice(index + tag.length);
 					break;
 				}
 			}
 		}
 
-		if(normalizedTag.includes(':')) {
-			const [rawType, rawValue = ''] = normalizedTag.split(':');
+		if (normalizedTag.includes(":")) {
+			const [rawType, rawValue = ""] = normalizedTag.split(":");
 			const tagType = rawType.trim().toLowerCase();
 			const tagValue = rawValue.trim();
 
-			if(tagValue.length > 0) {
+			if (tagValue.length > 0) {
 				normalizedTag = `${tagType}:${tagValue[0].toUpperCase()}${tagValue.slice(1)}`;
 			}
 			//trims spaces around colon and capitalizes the first word after the colon
@@ -75,55 +75,55 @@ const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholde
 		return normalizedTag;
 	};
 
-	const submitTag = (newValue, index = null)=>{
+	const submitTag = (newValue, index = null) => {
 		const trimmed = newValue?.trim();
-		if(!trimmed) return;
-		if(!valuePatterns.test(trimmed)) return;
+		if (!trimmed) return;
+		if (!valuePatterns.test(trimmed)) return;
 
 		const normalizedTag = normalizeValue(trimmed);
 
-		setTagList((prev)=>{
-			const existsIndex = prev.findIndex((t)=>t.value.toLowerCase() === normalizedTag.toLowerCase());
-			if(unique && existsIndex !== -1) return prev;
-			if(index !== null) {
-				return prev.map((t, i)=>(i === index ? { ...t, value: normalizedTag, editing: false } : t));
+		setTagList((prev) => {
+			const existsIndex = prev.findIndex((t) => t.value.toLowerCase() === normalizedTag.toLowerCase());
+			if (unique && existsIndex !== -1) return prev;
+			if (index !== null) {
+				return prev.map((t, i) => (i === index ? { ...t, value: normalizedTag, editing: false } : t));
 			}
 
 			return [...prev, { value: normalizedTag, editing: false }];
 		});
 	};
 
-	const removeTag = (index)=>{
-		setTagList((prev)=>prev.filter((_, i)=>i !== index));
+	const removeTag = (index) => {
+		setTagList((prev) => prev.filter((_, i) => i !== index));
 	};
 
-	const editTag = (index)=>{
-		setTagList((prev)=>prev.map((t, i)=>(i === index ? { ...t, editing: true, draft: t.value } : t)));
+	const editTag = (index) => {
+		setTagList((prev) => prev.map((t, i) => (i === index ? { ...t, editing: true, draft: t.value } : t)));
 	};
 
-	const stopEditing = (index)=>{
-		setTagList((prev)=>prev.map((t, i)=>(i === index ? { ...t, editing: false, draft: '' } : t)));
+	const stopEditing = (index) => {
+		setTagList((prev) => prev.map((t, i) => (i === index ? { ...t, editing: false, draft: "" } : t)));
 	};
 
-	const suggestionOptions = tagSuggestionList.map((tag)=>{
-		const tagType = tag.split(':');
+	const suggestionOptions = tagSuggestionList.map((tag) => {
+		const tagType = tag.split(":");
 
-		let classes = 'item';
+		let classes = "item";
 		switch (tagType[0]) {
-		case 'type':
-			classes = 'item type';
+			case "type":
+				classes = "item type";
 				break;
-		case 'group':
-			classes = 'item group';
+			case "group":
+				classes = "item group";
 				break;
-		case 'meta':
-			classes = 'item meta';
+			case "meta":
+				classes = "item meta";
 				break;
-		case 'system':
-			classes = 'item system';
+			case "system":
+				classes = "item system";
 				break;
 			default:
-			classes = 'item';
+				classes = "item";
 				break;
 		}
 
@@ -135,26 +135,54 @@ const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholde
 	});
 
 	return (
-		<div className='field tags'>
-			{label && <label>{label}</label>}
-
-			<div className='value'>
-				<ul className='list'>
-					{tagList.map((t, i)=>t.editing ? (
+		<div className="tagInputWrap">
+			<Combobox
+				trigger="click"
+				className="tagInput-dropdown"
+				default=""
+				placeholder={placeholder}
+				options={label === "tags" ? suggestionOptions : []}
+				tooltip={tooltip}
+				autoSuggest={
+					label === "tags"
+						? {
+								suggestMethod: "startsWith",
+								clearAutoSuggestOnClick: true,
+								filterOn: ["value", "title"],
+							}
+						: { suggestMethod: "includes", clearAutoSuggestOnClick: true, filterOn: [] }
+				}
+				valuePatterns={valuePatterns.source}
+				onSelect={(value) => submitTag(value)}
+				onEntry={(e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						submitTag(e.target.value);
+					}
+				}}
+			/>
+			<ul className="list">
+				{tagList.map((t, i) =>
+					t.editing ? (
 						<input
 							key={i}
-							type='text'
+							type="text"
 							value={t.draft} // always use draft
 							pattern={valuePatterns.source}
-							onChange={(e)=>setTagList((prev)=>prev.map((tag, idx)=>(idx === i ? { ...tag, draft: e.target.value } : tag)))}
-							onKeyDown={(e)=>{
-								if(e.key === 'Enter') {
+							onChange={(e) =>
+								setTagList((prev) =>
+									prev.map((tag, idx) => (idx === i ? { ...tag, draft: e.target.value } : tag)),
+								)
+							}
+							onKeyDown={(e) => {
+								if (e.key === "Enter") {
 									e.preventDefault();
 									submitTag(t.draft, i); // submit draft
-									setTagList((prev)=>prev.map((tag, idx)=>(idx === i ? { ...tag, draft: '' } : tag)),
+									setTagList((prev) =>
+										prev.map((tag, idx) => (idx === i ? { ...tag, draft: "" } : tag)),
 									);
 								}
-								if(e.key === 'Escape') {
+								if (e.key === "Escape") {
 									stopEditing(i);
 									e.target.blur();
 								}
@@ -162,47 +190,20 @@ const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholde
 							autoFocus
 						/>
 					) : (
-						<li key={i} className='tag' onClick={()=>editTag(i)}>
+						<li key={i} className="tag" onClick={() => editTag(i)}>
 							{t.value}
 							<button
-								type='button'
-								onClick={(e)=>{
+								type="button"
+								onClick={(e) => {
 									e.stopPropagation();
 									removeTag(i);
 								}}>
-								<i className='fa fa-times fa-fw' />
+								<i className="fa fa-times fa-fw" />
 							</button>
 						</li>
 					),
 				)}
 			</ul>
-
-				<Combobox
-					trigger='click'
-					className='tagInput-dropdown'
-					default=''
-					placeholder={placeholder}
-					options={label === 'tags' ? suggestionOptions : []}
-					autoSuggest={
-						label === 'tags'
-							? {
-								suggestMethod           : 'startsWith',
-								clearAutoSuggestOnClick : true,
-								filterOn                : ['value', 'title'],
-							}
-							: { suggestMethod: 'includes', clearAutoSuggestOnClick: true, filterOn: [] }
-					}
-					valuePatterns={valuePatterns.source}
-					onSelect={(value)=>submitTag(value)}
-					onEntry={(e)=>{
-						if(e.key === 'Enter') {
-							e.preventDefault();
-							submitTag(e.target.value);
-						}
-					}}
-				/>
-				{smallText.length !== 0 && <small>{smallText}</small>}
-			</div>
 		</div>
 	);
 };

client/homebrew/editor/tagInput/tagInput.less

@@ -1,5 +1,11 @@
 .tags {
 
+	.tagInputWrap {
+		display:grid;
+		grid-template-columns: 200px 3fr;
+		gap:10px;
+	}
+
 	.list input {
 		border-radius: 5px;
 	}

shared/naturalcrit/styles/tooltip.less

@@ -3,18 +3,23 @@
 @arrowSize     : 6px;
 @arrowPosition : 18px;
 [data-tooltip] {
+	position:relative;
 	.tooltip(attr(data-tooltip));
 }
 [data-tooltip-top] {
+	position:relative;
 	.tooltipTop(attr(data-tooltip-top));
 }
 [data-tooltip-bottom] {
+	position:relative;
 	.tooltipBottom(attr(data-tooltip-bottom));
 }
 [data-tooltip-left] {
+	position:relative;
 	.tooltipLeft(attr(data-tooltip-left));
 }
 [data-tooltip-right] {
+	position:relative;
 	.tooltipRight(attr(data-tooltip-right));
 }
 .tooltip(@content) {
@@ -75,8 +80,9 @@
 	}
 	&::after { margin-bottom : -14px;}
 	&::before, &::after {
-		bottom : 50%;
+		top : 50%;
 		left   : 100%;
+		translate:0 -50%;
 	}
 	&:hover::after, &:hover::before, &:focus::after, &:focus::before {
 		.transform(translateX(@arrowSize + 2));
@@ -106,9 +112,12 @@
 		font-size   : 12px;
 		line-height : 12px;
 		color       : white;
-		white-space : nowrap;
 		content     : @content;
 		background  : @tooltipColor;
+		max-width   : 50ch;
+		width		:max-content;
+		word-break	: break-word;
+		overflow-wrap : break-word;
 	}
 	&:hover::before, &:hover::after {
 		visibility : visible;