diff --git a/src/components.d.ts b/src/components.d.ts
index f0f60b6..b0586c7 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -31,6 +31,7 @@ export namespace Components {
     interface WcElixirUtilsNewService {
         "apiUrl": string;
         "authToken": string;
+        "description": "icon"|"text"|"none";
         "schema": string;
     }
     interface WcElixirUtilsServiceList {
@@ -153,6 +154,7 @@ declare namespace LocalJSX {
     interface WcElixirUtilsNewService {
         "apiUrl"?: string;
         "authToken"?: string;
+        "description"?: "icon"|"text"|"none";
         "schema"?: string;
     }
     interface WcElixirUtilsServiceList {
diff --git a/src/components/wc-elixir-utils-new-service/wc-elixir-utils-new-service.css b/src/components/wc-elixir-utils-new-service/wc-elixir-utils-new-service.css
index 5d4e87f..01b5a27 100644
--- a/src/components/wc-elixir-utils-new-service/wc-elixir-utils-new-service.css
+++ b/src/components/wc-elixir-utils-new-service/wc-elixir-utils-new-service.css
@@ -1,3 +1,40 @@
 :host {
   display: block;
 }
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 50vw;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 100%;
+  left: 0vw;
+  margin-left: -60px;
+  
+  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
+  opacity: 0;
+  transition: opacity 1s;
+}
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: black transparent transparent transparent;
+}
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
diff --git a/src/components/wc-elixir-utils-new-service/wc-elixir-utils-new-service.tsx b/src/components/wc-elixir-utils-new-service/wc-elixir-utils-new-service.tsx
index 0f718d1..a1700d4 100644
--- a/src/components/wc-elixir-utils-new-service/wc-elixir-utils-new-service.tsx
+++ b/src/components/wc-elixir-utils-new-service/wc-elixir-utils-new-service.tsx
@@ -10,6 +10,7 @@ export class WcElixirUtilsNewService {
   @Prop() apiUrl: string;
   @Prop() schema: string;
   @Prop() authToken: string;
+  @Prop() description: "icon"|"text"|"none" = "icon";
   @State() fields: any;
   @State() data: string = "loading";
 
@@ -73,8 +74,18 @@ export class WcElixirUtilsNewService {
             <div class="py-2 border-b ">
               <div class="flex justify-between items-center">
                 <div class="text flex-1">
+                  <div class ="flex items-center flex-start">
                   {this.toTitleCase(property)}
-                  {this.isRequired(property, this.fields) ? "*" : ""} :
+                  {this.isRequired(property, this.fields) ? "*" : ""}:
+                  {this.description==="icon" ?
+                  <div class="tooltip"> 
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" style={{display:"inline"}}>
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+                  </svg>
+                  <span class="tooltiptext">{this.fields.properties[property].description}</span>
+                  </div>
+                  :<div></div>}
+                  </div>
                 </div>
                 <div class="flex-1">
                   <input
@@ -86,18 +97,36 @@ export class WcElixirUtilsNewService {
                   ></input>
                 </div>
               </div>
+              {this.description === "text" ?
+                <div class="text-xs text-gray-400 italic">{this.fields.properties[property].description}</div>
+                :<div></div>}
               {this.fields.properties[property].properties ? (
                 Object.keys(this.fields.properties[property].properties).map((subproperty) => {
                   return (
-                    <div class="flex justify-between items-center my-2">
-                      <div class="text flex-1">{this.toTitleCase(subproperty)}:</div>
+                      <div>
+                      <div class="flex justify-between items-center my-2">
+                      <div class="text flex-1">
+                        {this.toTitleCase(subproperty)}:
+                        {this.description==="icon" ?
+                  <div class="tooltip"> 
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" style={{display:"inline"}}>
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+                  </svg>
+                  <span class="tooltiptext">{this.fields.properties[property].description}</span>
+                  </div>
+                  :<div></div>}
+                        </div>
                       <div class="flex-1">
                         <input
                           required={this.isRequired(property, this.fields.properties[property])}
                           class="w-full text-sm border-2 py-1.5 px-3 focus:outline-none rounded-lg focus:shadow"
                         ></input>
                       </div>
-                    </div>
+                        </div>
+                        {this.description === "text" ?
+                <div class="text-xs text-gray-400 italic">{this.fields.properties[property].description}</div>
+                :<div></div>}
+                      </div>
                   );
                 })
               ) : (