title: Display tooltip content in multiple rows
body: <p>In my vue js component, I'm trying to create a custom tool tip text with multiple line of texts.</p>
  <pre><code>&lt;div class=&quot;toolTip&quot;&gt;
    Shift ('+i+')
  &lt;/div&gt;
  &lt;div class=&quot;hide&quot;&gt;
    &lt;div class=&quot;w-full&quot;&gt;
     '+names[group]+'
    &lt;/div&gt;
    &lt;div class=&quot;w-full&quot;&gt;
     &lt;span class=&quot;material-icons&quot;&gt;calendar_today&lt;/span&gt;03 Mar 2023 - 04 Mar 2023 
    &lt;/div&gt;
    &lt;div class=&quot;w-full&quot;&gt;
     &lt;span class=&quot;material-icons&quot;&gt;schedule&lt;/span&gt; 
     08:00 - 18:00 
    &lt;/div&gt; 
    &lt;div class=&quot;w-full&quot;&gt;
     &lt;span class=&quot;material-icons&quot;&gt;pending_actions&lt;/span&gt;
     Door-to-door travel time: 6 hours
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This outputs me something like follows,</p>
  <p><a href="https://i.stack.imgur.com/uaNIm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uaNIm.png" alt="enter image description here" /></a></p>
  <p>But, I want to display each line in a separate row...</p>
  <p>Following is my CSS</p>
  <pre><code>.hide {
      display: none;
  }
      
  .toolTip:hover + .hide {
      display: flex;
      padding: 16px;
      background: rgba(9, 30, 66, 0.9);
      border-radius: 4px;
      position: relative;
      margin-top: -140px;
      text-align: left;
      line-height: 20px;
      font-weight: 400;
      font-size: 14px;
      
  }
  </code></pre>
  <p>I'm using tailwind css in my application..</p>