I have items that are listed in a container with overflow-y-scroll and each item has a tooltip that needs to be displayed to the right of the list item but outside of the container.
I followed this article and managed to implement something similar with Tailwind. See Tailwind Play. The problem is that the tooltips positions are incorrect after scrolling. (I assume it's because the list item is static)
How can I make the tooltip move with the list item as it scrolls? Is there a better way to do this?
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-screen items-center justify-center">
<div class="relative">
<ul class="h-24 w-24 space-y-3 overflow-y-auto overflow-x-hidden rounded-md border bg-gray-100 py-2 px-4">
<li class="group static cursor-pointer">
Item 1
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 1</p>
</div>
</li>
<li class="group static cursor-pointer">
Item 2
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 2</p>
</div>
</li>
<li class="group static cursor-pointer">
Item 3
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 3</p>
</div>
</li>
<li class="group static cursor-pointer">
Item 4
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 4</p>
</div>
</li>
</ul>
</div>
</div>
Related
I created this dropdown menu in Tailwind CSS but it takes on the whole area of the navbar background instead of being above or atleast outside of it on hover. I'm new to tailwind and have tried going through documentation in such of helpful utility classes but all to no avail.
This is my code snippet below[This is before HoverThis is after Hover](https://i.stack.imgur.com/qj85E.png)
<!-- Menu NavBar-->
<nav class="bg-lightDustyRose p-4">
<div class="container mx-auto">
<div class="hidden space-x-9 md:flex">
<div>
<button class="peer text-white hover:text-gray-500">Home</button>
<div class="hidden peer-hover:flex hover:flex w-[200px] flex-col bg-white drop-shadow-lg ">
<a class="px-5 py-3 hover:bg-gray-200" href="#">About Us</a>
<a class="px-5 py-3 hover:bg-gray-200" href="#">Contact Us</a>
<a class="px-5 py-3 hover:bg-gray-200" href="#">Privacy Policy</a>
</div>
</div>
</div>
</div>
</nav>
I tried adding a z index but it did not work
You can achieve that by adding position classes. The container of the links menu needs the absolute class, and the container of that, needs the relative class so it doesn't completely escapes the page structure. You can read more about the position css property here and how to use the position classes in tailwind here
<nav class="bg-lightDustyRose p-4">
<div class="container mx-auto">
<div class="hidden space-x-9 md:flex">
<div class="relative"> <--here--<<
<button class="peer text-white hover:text-gray-500">Home</button>
<div class="absolute hidden peer-hover:flex hover:flex w-[200px] flex-col bg-white drop-shadow-lg "> <--here--<<
<a class="px-5 py-3 hover:bg-gray-200" href="#">About Us</a>
<a class="px-5 py-3 hover:bg-gray-200" href="#">Contact Us</a>
<a class="px-5 py-3 hover:bg-gray-200" href="#">Privacy Policy</a>
</div>
</div>
</div>
</div>
</nav>
I need to have a screen that has top bar as a menu, that is a ul of my-10, and the rest of the screen is a div with a background image. Together they should cover h-screen.
What classes should I give to the nav, and what to the div containing the image?
Thanks
You can achieve this by display type of flex.
For your scenario:
Use a navand a div which is inside the parent element of flex flex-col h-screen
And then give following classes for nav and div
nav -> flex
div -> flex-1
Try the following simple code:
<div className="flex flex-col h-screen">
<nav class="flex items-center justify-between bg-white h-20 shadow-2xl">
<div class="logo">
<h1 class="text-black ml-4 cursor-pointer text-2xl">Logo here</h1>
</div>
<ul class="flex">
<li>
<a
class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
href="#"
>
<i class="fas fa-home"></i> Home
</a>
</li>
<li>
<a
class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
href="#"
>
<i class="fas fa-question"></i> About
</a>
</li>
<li>
<a
class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
href="#"
>
<i class="fas fa-reply"></i> Contact
</a>
</li>
</ul>
</nav>
<div className="flex-1 bg-black">
<img
src="https://mdbootstrap.com/img/new/slides/041.jpg"
className="min-w-full min-h-full"
alt="..."
/>
</div>
</div>
Output:
For more information about the flex class refer https://tailwindcss.com/docs/flex
I am using tailwind to make a component as below
how to make the button in the vertical middle / center instead of positioning on the top.
<div class="flex flex-grow mb-4">
<div class="w-12">
<i class=" cursor-pointer el-icon-back text-white mr-2 bg-blue-600 rounded-full p-2 mr-2" ></i>
</div>
<div class="w-96 border-gray-400 flex flex-row">
<div class="transition duration-500 shadow ease-in-out transform hover:-translate-y-1 hover:shadow-sm select-none cursor-pointer bg-white dark:bg-gray-800 rounded-md flex flex-1 items-center p-4 hover:border hover:border-blue-400">
<div class="flex flex-col w-10 h-10 justify-center items-center mr-4">
<a href="#" class="block relative">
<img alt="profil" src="https://www.tailwind-kit.com/images/person/6.jpg" class="mx-auto object-cover rounded-full h-10 w-10 "/>
</a>
</div>
<div class="flex-1 pl-1 ">
<div class="font-medium dark:text-white">
jake li
</div>
<div class="text-gray-600 dark:text-gray-200 text-sm">
2022.1.11
</div>
</div>
<div class="text-gray-600 dark:text-gray-200 text-xs">
</div>
<button class="w-12 text-right flex justify-end opacity-0 hover:opacity-100">
</button>
</div>
</div>
A little out of context, so here's a quick change for the button.
From:
<div class="w-12">
<i class=" cursor-pointer el-icon-back text-white mr-2 bg-blue-600 rounded-full p-2 mr-2" ></i>
</div>
To:
<div class="w-12 self-center text-center">
<i class=" cursor-pointer el-icon-back text-white bg-blue-600 rounded-full p-2" >←</i>
</div>
Or:
<div class="w-12 flex items-center justify-center">
<i class=" cursor-pointer el-icon-back text-white bg-blue-600 rounded-full p-2" >←</i>
</div>
You can test at https://play.tailwindcss.com and see if that's what you're looking for.
There are other details but for now that seems enough for the current question.
I am making a react + tailwind app, where I am having requirement to implement the two row navbar one by one.
For which code that I have tried,
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
<div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 1
</a>
<button
className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
onClick={() => setNavbarOpen(!navbarOpen)}
>
<i className="fas fa-bars"></i>
</button>
</div>
<div
className={
"lg:flex flex-grow items-center" +
(navbarOpen ? " flex" : " hidden")
}
id="example-navbar-danger"
>
<ul className="flex flex-col lg:flex-row list-none lg:ml-auto">
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 1 - Menu 1</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2"> Row 1 - Menu 2</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 1 - Menu 3</span>
</a>
</li>
</ul>
{/* Second row menus */}
<ul className="flex flex-col lg:flex-row list-none lg:ml-auto">
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 2 - Menu 1</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2"> Row 2 - Menu 2</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 2 - Menu 3</span>
</a>
</li>
</ul>
</div>
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 2
</a>
</div>
</nav>
I am a beginner to stackoverflow and so I don't know why the above snippet doesn't apply the respective styles but please go through complete working example here,
https://codesandbox.io/s/tailwind-css-and-react-forked-909d1
In the above example you could see that the first row menu and second row menu both are in same line, but I need to move the second row menu below first row.
Please kindly help me to achieve the result as like,
Desktop View:
| Logo 1 ------ Row-1-Menu-1 ---- Row-1-Menu-2 ---- Row-1-Menu-3 ---- Logo 2 |
| ------ Row-2-Menu-1 ---- Row-2-Menu-2 ---- Row-2-Menu-3 ---- |
Mobile/Tab View
| Logo 1 --------- Logo 2 --- Hamburger Icon -- |
Current UI can be viewd here https://909d1.csb.app/
You need to add flexDirection: column to render your ul in one single column and need to remove marginLeft: auto from ul
Try something like below:-
import React from "react";
export default function Navbar({ fixed }) {
const [navbarOpen, setNavbarOpen] = React.useState(false);
return (
<>
<nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
<div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 1
</a>
<button
className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
onClick={() => setNavbarOpen(!navbarOpen)}
>
<i className="fas fa-bars"></i>
</button>
</div>
<div
className={
"lg:flex flex-grow items-center" +
(navbarOpen ? " flex" : " hidden")
}
id="example-navbar-danger"
style={{ flexDirection: "column" }} // added flex direction
>
<ul className="flex flex-col lg:flex-row list-none"> // removed margin left
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 1 - Menu 1</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2"> Row 1 - Menu 2</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 1 - Menu 3</span>
</a>
</li>
</ul>
{/* Second row menus */}
<ul className="flex flex-col lg:flex-row list-none"> // removed margin left
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 2 - Menu 1</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2"> Row 2 - Menu 2</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 2 - Menu 3</span>
</a>
</li>
</ul>
</div>
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 2
</a>
</div>
</nav>
</>
);
}
I need to create a website using Tailwind and Vue.js The components such as the appheader, the appfooter, search bar, filtercontainer ect will be in different files. The problem is that I do not know how to make the connection between them so they all show. Right now I can show the app header, app footer and search bar but cannot show the filter container. The code is below:
App.vue
<div id="app" class="bg-gray-200 font-sans flex flex-col min-h-screen">
<AppHeader />
<router-view class="flex-grow"></router-view>
<AppFooter />
</div>
</template>
<script>
import AppHeader from './components/layout/AppHeader';
import AppFooter from './components/layout/AppFooter';
export default {
name: 'app',
watch: {
'$route' (to) {
document.title = to.meta.title || 'Logzor'
}
},
components: {
AppHeader,
AppFooter
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
</style>
AppHeader.vue
<header>
<nav class="font-sans flex flex-col text-center content-center sm:flex-row sm:text-left sm:justify-between py-2 px-6 bg-white shadow sm:items-baseline w-full">
<div class="mb-2 sm:mb-0 flex flex-row
">
<div class="h-10 w-10 self-center mr-2">
<img class="h-10 w-10 self-center" src="https://csscomps.com/images/csscomps.png" />
</div>
<div>
Log<br>
<span class="text-xs text-grey-dark">Log files</span>
</div>
</div>
<div class="sm:mb-0 self-center">
<!-- <div class="h-10" style="display: table-cell, vertical-align: middle;"> -->
Link1
Link2
<!-- About Us -->
Link3
<!-- </div> -->
</div>
</nav>
</header>
</template>
<style>
</style>
SearchBar.vue
<template>
<!-- Searchbar -->
<div class="flex w-full">
<input type="text" v-model="search.search" class="h-16 appearance-none rounded-l w-full py-2 px-2 ml-2 text-gray-700 leading-tight focus:outline-none text-2xl" id="search" placeholder="Search...">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 px-12 rounded-r "> SEARCH </button>
</div>
</template>
<script>
export default {
props: [
'search',
],
data() {
return {
}
},
methods: {
},
watch: {
value() {
this.$emit('collectSearch', this.search)
}
}
}
</script>
<style scoped>
</style>
FilterContainer.vue
<template>
<div class="w-full lg:w-1/5 lg:px-6 text-xl text-gray-800 leading-normal">
<p class="text-base font-bold py-2 lg:pb-6 text-gray-700">Menu</p>
<div class="block lg:hidden sticky inset-0">
<button id="menu-toggle" class="flex w-full justify-end px-3 py-3 bg-white lg:bg-transparent border rounded border-gray-600 hover:border-purple-500 appearance-none focus:outline-none">
<svg class="fill-current h-3 float-right" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</button>
</div>
<div class="w-full sticky inset-0 hidden h-64 lg:h-auto overflow-x-hidden overflow-y-auto lg:overflow-y-hidden lg:block mt-0 border border-gray-400 lg:border-transparent bg-white shadow lg:shadow-none lg:bg-transparent z-20" style="top:5em;" id="menu-content">
<ul class="list-reset">
<li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
<a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:border-purple-500 lg:hover:border-purple-500">
<span class="pb-1 md:pb-0 text-sm text-gray-900 font-bold">Home</span>
</a>
</li>
<li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
<a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:hover:border-gray-400">
<span class="pb-1 md:pb-0 text-sm">Tasks</span>
</a>
</li>
<li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
<a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:hover:border-gray-400">
<span class="pb-1 md:pb-0 text-sm">Messages</span>
</a>
</li>
<li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
<a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:hover:border-gray-400">
<span class="pb-1 md:pb-0 text-sm">Analytics</span>
</a>
</li>
<li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
<a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:hover:border-gray-400">
<span class="pb-1 md:pb-0 text-sm">Payments</span>
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>