last of tooltips

client/components/combobox.jsx

@@ -72,11 +72,12 @@ const Combobox = createReactClass({
 			<div className='dropdown-input item'
 				onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
 				onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}
-				{...(this.props.tooltip ? { 'data-tooltip-bottom': this.props.tooltip } : {})}>
+				{...(this.props.tooltip ? { 'data-tooltip-right': this.props.tooltip } : {})}>
 				<input
 					type='text'
 					onChange={(e)=>this.handleInput(e)}
 					value={this.state.value || ''}
+					title=''
 					pattern={this.props.valuePatterns}
 					placeholder={this.props.placeholder}
 					onBlur={(e)=>{

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -213,7 +213,7 @@ const MetadataEditor = createReactClass({
 				</div>;
 		} else {
 			dropdown =
-				<div className='value'>
+				<div className='value' data-tooltip-top='Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.'>
 					<Combobox trigger='click'
 						className='themes-dropdown'
 						default={currentThemeDisplay}
@@ -231,7 +231,6 @@ const MetadataEditor = createReactClass({
 							filterOn                : ['value', 'title']
 						}}
 					/>
-					<small>Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.</small>
 				</div>;
 		}
 

shared/naturalcrit/styles/tooltip.less

@@ -35,6 +35,7 @@
 	&::before, &::after {
 		bottom : 100%;
 		left   : 50%;
+		translate: -50% 0;
 	}
 	&:hover::after, &:hover::before, &:focus::after, &:focus::before {
 		.transform(translateY(-(@arrowSize + 2)));
@@ -50,6 +51,7 @@
 	&::before, &::after {
 		top  : 100%;
 		left : 50%;
+		translate: -50% 0;
 	}
 	&:hover::after, &:hover::before, &:focus::after, &:focus::before {
 		.transform(translateY(@arrowSize + 2));
@@ -62,7 +64,10 @@
 		margin-bottom     : -@arrowSize;
 		border-left-color : @tooltipColor;
 	}
-	&::after { margin-bottom : -14px;}
+	&::after {
+		margin-bottom : -14px;
+		max-width   : 50ch;
+	}
 	&::before, &::after {
 		right  : 100%;
 		bottom : 50%;
@@ -78,7 +83,10 @@
 		margin-left        : -@arrowSize * 2;
 		border-right-color : @tooltipColor;
 	}
-	&::after { margin-bottom : -14px;}
+	&::after {
+		margin-bottom : -14px;
+		max-width   : 50ch;
+	}
 	&::before, &::after {
 		top : 50%;
 		left   : 100%;
@@ -114,7 +122,7 @@
 		color       : white;
 		content     : @content;
 		background  : @tooltipColor;
-		max-width   : 50ch;
+		max-width   : 60ch;
 		width		:max-content;
 		word-break	: break-word;
 		overflow-wrap : break-word;