diff --git a/CHANGELOG.md b/CHANGELOG.md
index ebe78f0439..828a313fa8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed active state of sub navigation items, which are using activeWhenMatch ([#1199](https://github.com/scm-manager/scm-manager/pull/1199))
 - Handles repositories in custom directories correctly in migration from 1.x ([#1201](https://github.com/scm-manager/scm-manager/pull/1201))
 - Usage of short git commit ids in changeset urls ([#1200](https://github.com/scm-manager/scm-manager/pull/1200))
+- Fixes linebreaks in multiline tooltip ([#1207](https://github.com/scm-manager/scm-manager/pull/1207))
 
 ## [2.0.0] - 2020-06-04
 ### Added
diff --git a/scm-ui/ui-components/src/Tooltip.stories.tsx b/scm-ui/ui-components/src/Tooltip.stories.tsx
index f6f4cbad5b..13cfb93228 100644
--- a/scm-ui/ui-components/src/Tooltip.stories.tsx
+++ b/scm-ui/ui-components/src/Tooltip.stories.tsx
@@ -32,24 +32,38 @@ import Button from "./buttons/Button";
 
 const Wrapper = styled.div`
   margin: 2rem;
-  max-width: 400px;
+  width: 100%;
 `;
 
 const Spacing = styled.div`
   padding: 2em 6em;
+  width: 50%;
+  margin: 0 auto;
 `;
 
 const positions = ["right", "top", "left", "bottom"];
 
 const message = "Heart of Gold";
 
+const mutltiline = `Characters:
+
+- Arthur Dent
+- Ford Prefect
+- Zaphod Beeblebrox
+- Marvin the Paranoid Android
+- Trillian
+- Slartibartfast`;
+
+const shortMultiline = `* a
+* b
+* c`;
+
 const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
 
 storiesOf("Tooltip", module)
   .addDecorator(RoutingDecorator)
-  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
   .add("Default", () => (
-    <div>
+    <Wrapper>
       {positions.map(position => (
         <Spacing>
           <Tooltip message={message} location={position}>
@@ -57,5 +71,27 @@ storiesOf("Tooltip", module)
           </Tooltip>
         </Spacing>
       ))}
-    </div>
+    </Wrapper>
+  ))
+  .add("Multiline", () => (
+    <Wrapper>
+      {positions.map(position => (
+        <Spacing>
+          <Tooltip message={mutltiline} location={position}>
+            <Button label={position} color="info" />{" "}
+          </Tooltip>
+        </Spacing>
+      ))}
+    </Wrapper>
+  ))
+  .add("Short Multiline", () => (
+    <Wrapper>
+      {positions.map(position => (
+        <Spacing>
+          <Tooltip message={shortMultiline} location={position}>
+            <Button label={position} color="info" />{" "}
+          </Tooltip>
+        </Spacing>
+      ))}
+    </Wrapper>
   ));
diff --git a/scm-ui/ui-components/src/Tooltip.tsx b/scm-ui/ui-components/src/Tooltip.tsx
index 79f5c9f855..98dce960d2 100644
--- a/scm-ui/ui-components/src/Tooltip.tsx
+++ b/scm-ui/ui-components/src/Tooltip.tsx
@@ -38,9 +38,8 @@ class Tooltip extends React.Component<Props> {
 
   render() {
     const { className, message, location, children } = this.props;
-    const multiline = message.length > 60 ? "has-tooltip-multiline" : "";
     return (
-      <span className={classNames("tooltip", "has-tooltip-" + location, multiline, className)} data-tooltip={message}>
+      <span className={classNames("tooltip", "has-tooltip-" + location, className)} data-tooltip={message}>
         {children}
       </span>
     );
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 4ab1158583..a1db5dadc0 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -17281,7 +17281,7 @@ exports[`Storyshots Diff File Controls 1`] = `
               className="control"
             >
               <span
-                className="tooltip has-tooltip-top has-tooltip-multiline"
+                className="tooltip has-tooltip-top"
                 data-tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
               >
                 <a
@@ -17862,7 +17862,7 @@ exports[`Storyshots Diff File Controls 1`] = `
               className="control"
             >
               <span
-                className="tooltip has-tooltip-top has-tooltip-multiline"
+                className="tooltip has-tooltip-top"
                 data-tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
               >
                 <a
@@ -18720,7 +18720,7 @@ exports[`Storyshots Diff File Controls 1`] = `
               className="control"
             >
               <span
-                className="tooltip has-tooltip-top has-tooltip-multiline"
+                className="tooltip has-tooltip-top"
                 data-tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
               >
                 <a
@@ -19174,7 +19174,7 @@ exports[`Storyshots Diff File Controls 1`] = `
               className="control"
             >
               <span
-                className="tooltip has-tooltip-top has-tooltip-multiline"
+                className="tooltip has-tooltip-top"
                 data-tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
               >
                 <a
@@ -19628,7 +19628,7 @@ exports[`Storyshots Diff File Controls 1`] = `
               className="control"
             >
               <span
-                className="tooltip has-tooltip-top has-tooltip-multiline"
+                className="tooltip has-tooltip-top"
                 data-tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
               >
                 <a
@@ -20689,7 +20689,7 @@ exports[`Storyshots Diff File Controls 1`] = `
               className="control"
             >
               <span
-                className="tooltip has-tooltip-top has-tooltip-multiline"
+                className="tooltip has-tooltip-top"
                 data-tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
               >
                 <a
@@ -43584,81 +43584,273 @@ exports[`Storyshots Toast Warning 1`] = `null`;
 
 exports[`Storyshots Tooltip Default 1`] = `
 <div
-  className="Tooltipstories__Wrapper-sc-1c34uq-0 kMYfDl"
+  className="Tooltipstories__Wrapper-sc-1c34uq-0 QoXmo"
 >
-  <div>
-    <div
-      className="Tooltipstories__Spacing-sc-1c34uq-1 loCuMv"
+  <div
+    className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
+  >
+    <span
+      className="tooltip has-tooltip-right"
+      data-tooltip="Heart of Gold"
     >
-      <span
-        className="tooltip has-tooltip-right"
-        data-tooltip="Heart of Gold"
+      <button
+        className="button is-info"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="button is-info"
-          onClick={[Function]}
-          type="button"
-        >
-          right
-           
-        </button>
+        right
          
-      </span>
-    </div>
-    <div
-      className="Tooltipstories__Spacing-sc-1c34uq-1 loCuMv"
+      </button>
+       
+    </span>
+  </div>
+  <div
+    className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
+  >
+    <span
+      className="tooltip has-tooltip-top"
+      data-tooltip="Heart of Gold"
     >
-      <span
-        className="tooltip has-tooltip-top"
-        data-tooltip="Heart of Gold"
+      <button
+        className="button is-info"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="button is-info"
-          onClick={[Function]}
-          type="button"
-        >
-          top
-           
-        </button>
+        top
          
-      </span>
-    </div>
-    <div
-      className="Tooltipstories__Spacing-sc-1c34uq-1 loCuMv"
+      </button>
+       
+    </span>
+  </div>
+  <div
+    className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
+  >
+    <span
+      className="tooltip has-tooltip-left"
+      data-tooltip="Heart of Gold"
     >
-      <span
-        className="tooltip has-tooltip-left"
-        data-tooltip="Heart of Gold"
+      <button
+        className="button is-info"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="button is-info"
-          onClick={[Function]}
-          type="button"
-        >
-          left
-           
-        </button>
+        left
          
-      </span>
-    </div>
-    <div
-      className="Tooltipstories__Spacing-sc-1c34uq-1 loCuMv"
+      </button>
+       
+    </span>
+  </div>
+  <div
+    className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
+  >
+    <span
+      className="tooltip has-tooltip-bottom"
+      data-tooltip="Heart of Gold"
     >
-      <span
-        className="tooltip has-tooltip-bottom"
-        data-tooltip="Heart of Gold"
+      <button
+        className="button is-info"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="button is-info"
-          onClick={[Function]}
-          type="button"
-        >
-          bottom
-           
-        </button>
+        bottom
          
-      </span>
-    </div>
+      </button>
+       
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tooltip Multiline 1`] = `
+<div
+  className="Tooltipstories__Wrapper-sc-1c34uq-0 QoXmo"
+>
+  <div
+    className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
+  >
+    <span
+      className="tooltip has-tooltip-right"
+      data-tooltip="Characters:
+
+- Arthur Dent
+- Ford Prefect
+- Zaphod Beeblebrox
+- Marvin the Paranoid Android
+- Trillian
+- Slartibartfast"
+    >
+      <button
+        className="button is-info"
+        onClick={[Function]}
+        type="button"
+      >
+        right
+         
+      </button>
+       
+    </span>
+  </div>
+  <div
+    className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
+  >
+    <span
+      className="tooltip has-tooltip-top"
+      data-tooltip="Characters:
+
+- Arthur Dent
+- Ford Prefect
+- Zaphod Beeblebrox
+- Marvin the Paranoid Android
+- Trillian
+- Slartibartfast"
+    >
+      <button
+        className="button is-info"
+        onClick={[Function]}
+        type="button"
+      >
+        top
+         
+      </button>
+       
+    </span>
+  </div>
+  <div
+    className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
+  >
+    <span
+      className="tooltip has-tooltip-left"
+      data-tooltip="Characters:
+
+- Arthur Dent
+- Ford Prefect
+- Zaphod Beeblebrox
+- Marvin the Paranoid Android
+- Trillian
+- Slartibartfast"
+    >
+      <button
+        className="button is-info"
+        onClick={[Function]}
+        type="button"
+      >
+        left
+         
+      </button>
+       
+    </span>
+  </div>
+  <div
+    className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
+  >
+    <span
+      className="tooltip has-tooltip-bottom"
+      data-tooltip="Characters:
+
+- Arthur Dent
+- Ford Prefect
+- Zaphod Beeblebrox
+- Marvin the Paranoid Android
+- Trillian
+- Slartibartfast"
+    >
+      <button
+        className="button is-info"
+        onClick={[Function]}
+        type="button"
+      >
+        bottom
+         
+      </button>
+       
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tooltip Short Multiline 1`] = `
+<div
+  className="Tooltipstories__Wrapper-sc-1c34uq-0 QoXmo"
+>
+  <div
+    className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
+  >
+    <span
+      className="tooltip has-tooltip-right"
+      data-tooltip="* a
+* b
+* c"
+    >
+      <button
+        className="button is-info"
+        onClick={[Function]}
+        type="button"
+      >
+        right
+         
+      </button>
+       
+    </span>
+  </div>
+  <div
+    className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
+  >
+    <span
+      className="tooltip has-tooltip-top"
+      data-tooltip="* a
+* b
+* c"
+    >
+      <button
+        className="button is-info"
+        onClick={[Function]}
+        type="button"
+      >
+        top
+         
+      </button>
+       
+    </span>
+  </div>
+  <div
+    className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
+  >
+    <span
+      className="tooltip has-tooltip-left"
+      data-tooltip="* a
+* b
+* c"
+    >
+      <button
+        className="button is-info"
+        onClick={[Function]}
+        type="button"
+      >
+        left
+         
+      </button>
+       
+    </span>
+  </div>
+  <div
+    className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
+  >
+    <span
+      className="tooltip has-tooltip-bottom"
+      data-tooltip="* a
+* b
+* c"
+    >
+      <button
+        className="button is-info"
+        onClick={[Function]}
+        type="button"
+      >
+        bottom
+         
+      </button>
+       
+    </span>
   </div>
 </div>
 `;