Show information in tooltips across several rows

Within my Vue.js component, I am attempting to craft a custom tooltip text that consists of multiple lines.

<div class="toolTip">
  Shift ('+i+')
</div>
<div class="hide">
  <div class="w-full">
   '+names[group]+'
  </div>
  <div class="w-full">
   <span class="material-icons">calendar_today</span>03 Mar 2023 - 04 Mar 2023 
  </div>
  <div class="w-full">
   <span class="material-icons">schedule</span> 
   08:00 - 18:00 
  </div> 
  <div class="w-full">
   <span class="material-icons">pending_actions</span>
   Door-to-door travel time: 6 hours
  </div>
</div>

The above code generates the following output:

https://i.stack.imgur.com/uaNIm.png

However, my intention is to have each line displayed on a separate row...

Below is the CSS I am utilizing for this feature:

.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;
    
}

It's worth mentioning that I am integrating Tailwind CSS in my application.

htmlcssvue.jstailwind-css

Answer №1

flex-wrap: wrap;

Attempting to ensure all content fits on single line.

Suggested alternatives:

display: inherit;

or

display: inline;

Answer №2

if you are utilizing tailwindcss , you have the opportunity to take advantage of its features.

Below is an example of how you can apply classes:

    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;   
}

You can easily transform the above code to 

hidden group-hover:flex p-[16px] rounded-[4px] bg-[#091E42] text-left text-white font-normal text-[14px]
.

Implementation example:

<script src="https://cdn.tailwindcss.com"></script>
<div class="group p-4 space-y-3">
<div class="p-[10px] rounded-[4px] bg-[#091E77] text-left text-white font-normal w-56 cursor-pointer ">
  Shift ('+i+')
</div>
<div class="hidden group-hover:flex p-[16px] rounded-[4px] bg-[#091E42] text-left text-white font-normal text-[14px]">
  <div class="w-full">
   '+names[group]+'
  </div>
  <div class="w-full">
   <span class="material-icons">calendar_today</span>03 Mar 2023 - 04 Mar 2023
  </div>
  <div class="w-full">
   <span class="material-icons">schedule</span>
   08:00 - 18:00
  </div>
  <div class="w-full">
   <span class="material-icons">pending_actions</span>
   Door-to-door travel time: 6 hours
  </div>
</div>
</div>

By hovering over the blue button, a tooltip will be displayed.

For more information on applying styles using the group utility, visit this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Resizing an image within an anchor tag

Currently, I am working on styling a page in NextJS. The challenge I'm facing is resizing an image that is inside an anchor within a div. Despite numerous attempts, the image refuses to resize as desired. I've experimented with applying properti ...

cssnext.js

Is it possible for me to access and observe the children attribute within the $ref reference

Is it possible to listen for changes to the children property of an element if the element renders its children later and I have a reference to the element? <element ref="parent"> <child-to-be-loaded-later /> </element> ...

vue.js

Is it feasible to incorporate one iOS app within another iOS app through in-app purchasing or subscription?

Simply put, we are creating interactive content in Flash that we want to distribute through an iOS app either by in-app purchase or subscription. In our testing, we have found that Flash can produce standalone iOS apps that work well for our needs. Instea ...

iphoneflashioshtml

Having difficulty styling scrollbars using CSS

There is currently a scrollbar displaying over part of my page when necessary. https://i.stack.imgur.com/48Rbx.png I want to change the styling of the scrollbar to make it less bright and have a transparent background. I attempted to apply some styles, bu ...

css

Error message: Unable to run npm script serve due to permission issues with vue-cli-service

Attempting to execute a basic vue project, but encountering difficulties running it on my openSUSE TW (20200615) system. I have NVM for managing my node installation. Here is my current environment: nvm --version # 0.35.3 node --version # v14.4.0 npm --v ...

node.jsvue.jsnpmvuejs2vue-cli

Using window.open and appending a new feature to it

Below is the code found in my index.html file: <!DOCTYPE html> <html> <head> <script> function createDialogBox() { var dialogBox = window.open("in1.html"); dialogBox.nameBox= "my little box" } window.onload = createDialogBox; wind ...

javascriptjqueryhtmldom

Extracting text using Python and Selenium

Having trouble extracting text from HTML using Selenium and Python innerHTML <span data-select="" data-selected="Selected" data-deselect="Press enter to remove" class="multiselect__option"><span>ONE</span></span> <!----> ...

pythonhtmlselenium-webdriver

Header implementation causing issues with TailwindCSS's calc function

I'm currently working on creating a header for my project. Below is the code snippet I've put together which uses calc to subtract the height allocated for the header: <div className='flex flex-col h-full'> <Header/ ...

reactjstailwind-css

Finding image input loading

When working with the following code: <input type="image" ... onLoad="this.style.opacity = 1" /> Everything seemed to be functioning well in IE, but encountered an issue in Chrome where the onLoad event failed to trigger upon image load. It's ...

javascripthtmlcssonload

Unable to load CSS background image and update code

After writing the code in my CSS file, /*The code I initially wrote*/ .wrapper::before { content: ""; position: absolute; bottom: -30%; left: 0; height: 100%; width: 100%; background: url(../img/homeTrans2.svg) no-repe ...

htmlcss

What is the best way to align an HTML DIV with a logo on the left side?

I am trying to position a div called #top_menu in the center of the page. <div id="top_menu">This is the menu and it is centered on the page</div> Here is my CSS code: #top_menu { margin: 0 auto; width: 600px; ... } Next to the top menu, I ...

htmlcsslayoutcentergraphical-logo

Troubleshooting VueJS Promise.all Problem

I need help implementing promise-based logic for asynchronous data fetching in VueJS. Previously, I had the following logic: if (influencer.suggested?.length && url.length) { const [ interactions, suggested_ids ] = await Promise.all([ $axios.$ ...

javascriptvue.jspromise

Exploring the intricacies of defining Vue component props in TypeScript using Vue.extend()

Here is a simple example to illustrate my question When I directly define my props inside the component, everything works fine <script lang="ts"> import Vue, { PropType } from "vue"; export default Vue.extend({ props: { col ...

javascripttypescriptvue.js

Inquiry regarding the grid structure within my react application

When attempting to arrange my images in a grid layout, I encountered a strange issue after applying CSS grid. The grids ended up being organized horizontally instead of how I wanted them to be - two or three images per line. The component hierarchy is as ...

cssreactjscss-grid

Using Angular 4 to retrieve a dynamic array from Firebase

I have a dilemma while creating reviews for the products in my shop. I am facing an issue with the button and click event that is supposed to save the review on the database. Later, when I try to read those reviews and calculate the rating for the product, ...

htmlangulartypescriptfirebase

Fade out at varying speeds

As I delve into CSS3 animations, I have been experimenting with some example code. Here is the link to the code: http://jsfiddle.net/chricholson/z7Bg6/67/ I am curious about how to adjust the duration of animations when un-hovering. Currently, it seems th ...

htmlcss

Facing difficulty in passing data to a child component through VueX

<template> ... <note-info></note-info> <note-list></note-list> ... </template> I am utilizing VueX and store.js export default { state: { noteDataList: [], }, mutations: { setNoteDataList: fu ...

vue.jsvuex

Is there a simpler method to enable built-in CSS-Sass in Next.js without the need for excessive configuration?

Is there a way to maintain the built-in CSS/SASS feature in Next.js without extensive configuration? Utilizing the built-in CSS/SASS is convenient, but introducing less to next.config.js triggers the disabling of this feature, requiring manual configurati ...

csswebpacksasslessnext.js

Ensuring the precise alignment of a singular component in Angular 8 while keeping the styles of its child elements unchanged

Is there a way to centralize div elements within a component without impacting the styles of those specific divs? How can I achieve this? I'm currently working with Angular 8. Using the text-align method affects the alignment of the text inside the d ...

cssangularfrontend

Adjusting page layout following window dimension changes

Every time I work on developing HTML pages, I encounter issues with window resizing. The alignment of the page gets disrupted and elements end up overlapping each other. I want my page to maintain its layout when resized, with scrollbars appearing instea ...

htmlcss