diff --git a/docs/docs/examples/content.mdx b/docs/docs/examples/content.mdx
index 5eadb0588..47a83a7ce 100644
--- a/docs/docs/examples/content.mdx
+++ b/docs/docs/examples/content.mdx
@@ -40,14 +40,14 @@ import { Tooltip } from 'react-tooltip';
 import 'react-tooltip/dist/react-tooltip.css';
 
 <a id="tooltip-anchor"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor" content="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip" place="left" />
+<Tooltip anchorId="tooltip-anchor" content="hello world!" place="left" />
 ```
 
 <div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
   <TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
   <Tooltip
     anchorId="tooltip-anchor"
-    content="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip"
+    content="hello world!"
   />
 </div>
 
@@ -58,23 +58,18 @@ import { Tooltip } from 'react-tooltip';
 import 'react-tooltip/dist/react-tooltip.css';
 
 <a
-  id="tooltip-anchor-data-html"
-  data-tooltip-content="<div><h1>Tooltip</h1><ul><li>Lorem</li><li>Ipsum</li></ul></div>"
+  id="tooltip-anchor-data-tooltip-content"
+  data-tooltip-content="hello world!"
 > ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-data-html" />
+<Tooltip anchorId="tooltip-anchor-data-tooltip-content" />
 ```
 
 <div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
   <TooltipAnchor
-    id="tooltip-anchor-html"
-    data-tooltip-content="<div><h1>Tooltip</h1><ul><li>Lorem</li><li>Ipsum</li></ul></div>"
+    id="tooltip-anchor-data-tooltip-content"
+    data-tooltip-content="hello world!"
   >
     ◕‿‿◕
   </TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor-html" />
+  <Tooltip anchorId="tooltip-anchor-data-tooltip-content" />
 </div>
-
-#### Observations
-
-- When using `data-tooltip-content` the HTML tags works by default like [HTML](./html.mdx) param
-- When using prop `content` the HTML doesn't work by default, use prop `html` instead of this
diff --git a/docs/docs/examples/delay.mdx b/docs/docs/examples/delay.mdx
index 8650afdbd..b0ff4dc73 100644
--- a/docs/docs/examples/delay.mdx
+++ b/docs/docs/examples/delay.mdx
@@ -41,8 +41,8 @@ import 'react-tooltip/dist/react-tooltip.css';
 
 <a
   id="tooltip-anchor-hide"
-  data-tooltip-content="hover on me will keep the tooltip"
-  data-tooltip-delay-hide={3000}
+  data-tooltip-content="It will take me 1000ms to close"
+  data-tooltip-delay-hide={1000}
 > ◕‿‿◕ </a>
 <Tooltip anchorId="tooltip-anchor-hide" />
 ```
@@ -50,8 +50,8 @@ import 'react-tooltip/dist/react-tooltip.css';
 <div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
   <TooltipAnchor
     id="tooltip-anchor-hide"
-    data-tooltip-content="hover on me will keep the tooltip"
-    data-tooltip-delay-hide={3000}
+    data-tooltip-content="It will take me 1000ms to close"
+    data-tooltip-delay-hide={1000}
   >
     ◕‿‿◕
   </TooltipAnchor>
@@ -66,8 +66,8 @@ import 'react-tooltip/dist/react-tooltip.css';
 
 <a
   id="tooltip-anchor-show"
-  data-tooltip-content="hover on me will keep the tooltip"
-  data-tooltip-delay-show={3000}
+  data-tooltip-content="It took me 1000ms to open"
+  data-tooltip-delay-show={1000}
 > ◕‿‿◕ </a>
 <Tooltip anchorId="tooltip-anchor-show" />
 ```
@@ -75,8 +75,8 @@ import 'react-tooltip/dist/react-tooltip.css';
 <div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
   <TooltipAnchor
     id="tooltip-anchor-show"
-    data-tooltip-content="hover on me will keep the tooltip"
-    data-tooltip-delay-show={3000}
+    data-tooltip-content="It took me 1000ms to open"
+    data-tooltip-delay-show={1000}
   >
     ◕‿‿◕
   </TooltipAnchor>
diff --git a/docs/docs/examples/events.mdx b/docs/docs/examples/events.mdx
index 2fceb9857..eb7b9f82a 100644
--- a/docs/docs/examples/events.mdx
+++ b/docs/docs/examples/events.mdx
@@ -64,22 +64,3 @@ import 'react-tooltip/dist/react-tooltip.css';
   <TooltipAnchor id="tooltip-anchor-click">◕‿‿◕</TooltipAnchor>
   <Tooltip anchorId="tooltip-anchor-click" content="Hello World!" events={['click']} />
 </div>
-
-### Using `hover` and `click`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="tooltip-anchor-hover-click"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-hover-click" content="Hello World!" events={['hover', 'click']} />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor id="tooltip-anchor-hover-click">◕‿‿◕</TooltipAnchor>
-  <Tooltip
-    anchorId="tooltip-anchor-hover-click"
-    content="Hello World!"
-    events={['hover', 'click']}
-  />
-</div>
diff --git a/docs/docs/examples/multiline.mdx b/docs/docs/examples/multiline.mdx
index 9cb82487e..1fd35d4dd 100644
--- a/docs/docs/examples/multiline.mdx
+++ b/docs/docs/examples/multiline.mdx
@@ -48,26 +48,6 @@ import 'react-tooltip/dist/react-tooltip.css';
   <Tooltip anchorId="tooltip-anchor" html="Hello<br />multiline<br />tooltip" />
 </div>
 
-### Using `data-tooltip-content`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="tooltip-anchor-data-content" data-tooltip-content="Hello<br />multiline<br />tooltip"> ◕‿‿◕ </a>
-<Tooltip anchorId="tooltip-anchor-data-content" />
-```
-
-<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
-  <TooltipAnchor
-    id="tooltip-anchor-data-content"
-    data-tooltip-content="Hello<br />multiline<br />tooltip"
-  >
-    ◕‿‿◕
-  </TooltipAnchor>
-  <Tooltip anchorId="tooltip-anchor-data-content" />
-</div>
-
 ### Using `data-tooltip-html`
 
 ```jsx
@@ -84,8 +64,3 @@ import 'react-tooltip/dist/react-tooltip.css';
   </TooltipAnchor>
   <Tooltip anchorId="tooltip-anchor-html" />
 </div>
-
-#### Observations
-
-- When using `data-tooltip-content` the `<br />` works by default
-- When using prop `content` the `<br />` doesn't work by default, use prop `html` instead of this
diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started.mdx
index 4ca64e3e4..79fb4b2b5 100644
--- a/docs/docs/getting-started.mdx
+++ b/docs/docs/getting-started.mdx
@@ -98,7 +98,7 @@ import { Tooltip } from 'react-tooltip'
 
 ### Styling
 
-If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css`.
+If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css'`.
 
 Basic styling can be done by overriding the following css variables.
 
diff --git a/docs/package.json b/docs/package.json
index 1de8fe10e..3e72cfd6e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -23,7 +23,7 @@
     "raw-loader": "^4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-tooltip": "5.3.0"
+    "react-tooltip": "5.3.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.2.0",
diff --git a/docs/yarn.lock b/docs/yarn.lock
index def29a93a..cefe84684 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -6112,10 +6112,10 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react-tooltip@5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.3.0.tgz#cba9d40396bf7c15c5d748425f76ec5c3e69b213"
-  integrity sha512-dE702vnPYYUPDWeFHCMzyCbJ3Ca3c160p1EQvumacTl19a0RjVJ4KHBT4XCJ1FVPLKjI6xJR0+RuSAzWyUkGow==
+react-tooltip@5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.3.1.tgz#b2bb849384c5e1fa182460efb3ea4f8ebad69fca"
+  integrity sha512-lBX24Xvs/ZGwq+3waku9FHNAqIIjjlq+Hlk6R+mpbmeGM6LQ9zUfMKlPtWynZg50ZZ1/3ndlt8YtCEPNPCT5gw==
   dependencies:
     "@floating-ui/dom" "^1.0.4"
     classnames "^2.3.2"
diff --git a/package.json b/package.json
index 139bdaca0..9f75359e0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "react tooltip component",
   "scripts": {
     "dev": "node ./cli.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch",
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 995d8d2ef..3b5f16162 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -291,12 +291,14 @@ const Tooltip = ({
     }
   }, [])
 
+  const hasContentOrChildren = Boolean(content || children)
+
   return (
     <WrapperElement
       id={id}
       role="tooltip"
       className={classNames(styles['tooltip'], styles[variant], className, {
-        [styles['show']]: content && !calculatingPosition && (isOpen || show),
+        [styles['show']]: hasContentOrChildren && !calculatingPosition && (isOpen || show),
         [styles['fixed']]: positionStrategy === 'fixed',
       })}
       style={{ ...externalStyles, ...inlineStyles }}
diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx
index 645499dac..d679e24de 100644
--- a/src/components/TooltipController/TooltipController.tsx
+++ b/src/components/TooltipController/TooltipController.tsx
@@ -68,11 +68,10 @@ const TooltipController = ({
         setTooltipPlace((value as PlacesType) ?? place)
       },
       content: (value) => {
-        setIsHtmlContent(false)
         setTooltipContent(value ?? content)
       },
       html: (value) => {
-        setIsHtmlContent(!!value)
+        setIsHtmlContent(Boolean(value ?? html))
         setTooltipContent(value ?? html ?? content)
       },
       variant: (value) => {
@@ -110,10 +109,11 @@ const TooltipController = ({
   }
 
   useEffect(() => {
-    if (content) {
-      setTooltipContent(content)
-    }
+    setIsHtmlContent(false)
+    setTooltipContent(content)
     if (html) {
+      // html will take precedence
+      setIsHtmlContent(true)
       setTooltipContent(html)
     }
   }, [content, html])