added new tooltip props and callout component

Author: ruhanponnada

components/callouts.mdx

@@ -4,7 +4,7 @@ description: 'Use callouts to add eye-catching context to your content'
 icon: 'info'
 ---
 
-Callouts can be styled as a Note, Warning, Info, Tip, or Check:
+Callouts can be styled as a Note, Warning, Info, Tip, Check, or create your own callout:
 
 <Note>This adds a note in the content</Note>
 
@@ -42,10 +42,16 @@ Callouts can be styled as a Note, Warning, Info, Tip, or Check:
 <Danger>This is a danger callout</Danger>
 ```
 
+<Callout icon="key" color="#FFC107" iconType="regular">
+  This is a custom callout
+</Callout>
+
 <RequestExample>
 
 ```mdx Callout Example
-<Note>This adds a note in the content</Note>
+<Callout icon="key" color="#FFC107" iconType="regular">
+  This is a custom callout
+</Callout>
 ```
 
 </RequestExample>

components/tooltips.mdx

@@ -6,12 +6,12 @@ icon: 'message-square'
 
 Tooltips are a way to show a definition when you hover over text.
 
-<Tooltip tip="This is a tooltip!">Hover over me</Tooltip> and see a tooltip in action
+<Tooltip tip="This is a tooltip!" cta="Learn more about changelogs" href="/components/update">Hover over me</Tooltip> and see a tooltip in action
 
 <RequestExample>
 
-```mdx Tooltip Example
-<Tooltip tip="This is a tooltip!">Hover over me</Tooltip>
+```mdx Tooltip Example wrap
+<Tooltip tip="This is a tooltip!" cta="Learn more about changelogs" href="/components/update">Hover over me</Tooltip>
 ```
 
 </RequestExample>