feat: add toop tip content to bucket, measurement, fields, and tag keys titles (#4683)

Author: appletreeisyellow

src/dataExplorer/components/BucketSelector.tsx

@@ -9,6 +9,9 @@ import SearchableDropdown from 'src/shared/components/SearchableDropdown'
 import {NewDataExplorerContext} from 'src/dataExplorer/context/newDataExplorer'
 import {BucketContext} from 'src/shared/contexts/buckets'
 
+const BUCKET_TOOLTIP = `A bucket is a named location where time series data \
+is stored. You can think of a bucket like you would a database in SQL systems.`
+
 const BucketSelector: FC = () => {
   const {selectedBucket, selectBucket} = useContext(NewDataExplorerContext)
   const {buckets} = useContext(BucketContext)
@@ -28,7 +31,7 @@ const BucketSelector: FC = () => {
 
   return (
     <div>
-      <SelectorTitle title="Bucket" info="Test info" />
+      <SelectorTitle title="Bucket" info={BUCKET_TOOLTIP} />
       <SearchableDropdown
         searchTerm={searchTerm}
         searchPlaceholder="Search buckets"

src/dataExplorer/components/FieldSelector.tsx

@@ -15,6 +15,10 @@ import {RemoteDataState} from 'src/types'
 // Syles
 import './Schema.scss'
 
+const FIELD_TOOLTIP = `Fields and Field Values are non-indexed \
+key values pairs within a measurement. For SQL users, this is \
+conceptually similar to a non-indexed column and value.`
+
 const FieldSelector: FC = () => {
   const {fields, loading} = useContext(FieldsContext)
   const [fieldsToShow, setFieldsToShow] = useState([])
@@ -61,7 +65,7 @@ const FieldSelector: FC = () => {
     return (
       <Accordion className="field-selector" expanded={true}>
         <Accordion.AccordionHeader className="field-selector--header">
-          <SelectorTitle title="Fields" info="Test info" />
+          <SelectorTitle title="Fields" info={FIELD_TOOLTIP} />
         </Accordion.AccordionHeader>
         <div className="container-side-bar">
           {list}

src/dataExplorer/components/MeasurementSelector.tsx

@@ -12,6 +12,12 @@ import {MeasurementContext} from 'src/dataExplorer/context/measurements'
 // Types
 import {RemoteDataState} from 'src/types'
 
+const MEASUREMENT_TOOLTIP = `The measurement acts as a container for tags, \
+fields, and the time column, and the measurement name is the description of \
+the data that are stored in the associated fields. Measurement names are \
+strings, and, for any SQL users out there, a measurement is conceptually \
+similar to a table.`
+
 const convertStatus = (remoteDataState: RemoteDataState): ComponentStatus => {
   switch (remoteDataState) {
     case RemoteDataState.Error:
@@ -45,7 +51,7 @@ const MeasurementSelector: FC = () => {
 
     return (
       <div>
-        <SelectorTitle title="Measurement" info="Test info" />
+        <SelectorTitle title="Measurement" info={MEASUREMENT_TOOLTIP} />
         <SearchableDropdown
           searchTerm={searchTerm}
           searchPlaceholder="Search measurements"

src/dataExplorer/components/SelectorTitle.tsx

@@ -17,7 +17,11 @@ const SelectorTitle: FC<TitleProps> = ({title, info = ''}) => {
       <div>{title}</div>
       {info && (
         <div className="selector-title--icon">
-          <QuestionMarkTooltip tooltipContents={info} diameter={14} />
+          <QuestionMarkTooltip
+            tooltipContents={info}
+            diameter={14}
+            tooltipStyle={{width: '300px'}}
+          />
         </div>
       )}
     </FlexBox>

src/dataExplorer/components/TagSelector.tsx

@@ -15,6 +15,10 @@ import {TagsContext} from 'src/dataExplorer/context/tags'
 // Types
 import {RemoteDataState} from 'src/types'
 
+const TAG_KEYS_TOOLTIP = `Tags and Tag Values are indexed key values \
+pairs within a measurement. For SQL users, this is conceptually \
+similar to an indexed column and value.`
+
 interface Prop {
   loading: RemoteDataState
   tagKey: string
@@ -142,7 +146,7 @@ const TagSelector: FC = () => {
     () => (
       <Accordion className="tag-selector-key" expanded={true}>
         <Accordion.AccordionHeader className="tag-selector-key--header">
-          <SelectorTitle title="Tag Keys" info="Test info" />
+          <SelectorTitle title="Tag Keys" info={TAG_KEYS_TOOLTIP} />
         </Accordion.AccordionHeader>
         <div className="container-side-bar">{list}</div>
       </Accordion>