文章/答案/技术大牛

发布

社区首页 >问答首页 >在flex可滚动元素中创建工具提示

问在flex可滚动元素中创建工具提示
EN

Stack Overflow用户

提问于 2022-11-21 15:27:03

回答 1查看 25关注 0票数 0

我已经为这个问题挣扎了几个小时，基本上我是在用顺风做一个导航条，侧边栏中的每个元素都应该有一个工具提示-- toolstips可以工作--但是当我滚动div时，工具提示没有正确地跟随内容。我试过改变很多东西，但没有成功，也许你们的css专家可以帮我;)

不跟随所选按钮的内容

它应该是..。

到目前为止，代码如下：

<div className="w-screen h-screen m-0 p-0">
        <div className="flex flex-row w-full h-full">
            {/* Sidenav MD */}
            <div className="flex flex-col w-[80px] h-full flex-none bg-white items-center justify-between">
                <div className="w-full flex flex-col space-y-2 p-2 items-center overflow-y-auto">
                    <div className="flex flex-none justify-center items-center w-10 h-10 bg-black rounded-md">
                        <span className="text-lg text-white">X</span>
                    </div>
                    <div className="group flex flex-row items-center">
                        <div className="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-7 h-7 flex-none">
                                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                            </svg>
                        </div>
                        <span className="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
                    </div>
                    <div className="group flex flex-row items-center">
                        <div className="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7 flex-none">
                                <path fillRule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clipRule="evenodd" />
                            </svg>
                        </div>
                        <span className="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Notifications</span>
                    </div>
                    <div className="group flex flex-row items-center">
                        <div className="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7 flex-none">
                                <path fillRule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clipRule="evenodd" />
                            </svg>
                        </div>
                        <span className="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Today</span>
                    </div>
                    <div className="group flex flex-row items-center">
                        <div className="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7 flex-none">
                                <path fillRule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clipRule="evenodd" />
                            </svg>
                        </div>
                        <span className="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Upcoming</span>
                    </div>
                    <div className="flex flex-none items-center justify-center w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7">
                            <path fillRule="evenodd" d="M19.5 21a3 3 0 003-3V9a3 3 0 00-3-3h-5.379a.75.75 0 01-.53-.22L11.47 3.66A2.25 2.25 0 009.879 3H4.5a3 3 0 00-3 3v12a3 3 0 003 3h15zm-6.75-10.5a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V10.5z" clipRule="evenodd" />
                        </svg>
                    </div>
                    <div className="flex flex-none items-center justify-center w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7">
                            <path fillRule="evenodd" d="M7.502 6h7.128A3.375 3.375 0 0118 9.375v9.375a3 3 0 003-3V6.108c0-1.505-1.125-2.811-2.664-2.94a48.972 48.972 0 00-.673-.05A3 3 0 0015 1.5h-1.5a3 3 0 00-2.663 1.618c-.225.015-.45.032-.673.05C8.662 3.295 7.554 4.542 7.502 6zM13.5 3A1.5 1.5 0 0012 4.5h4.5A1.5 1.5 0 0015 3h-1.5z" clipRule="evenodd" />
                            <path fillRule="evenodd" d="M3 9.375C3 8.339 3.84 7.5 4.875 7.5h9.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 013 20.625V9.375zm9.586 4.594a.75.75 0 00-1.172-.938l-2.476 3.096-.908-.907a.75.75 0 00-1.06 1.06l1.5 1.5a.75.75 0 001.116-.062l3-3.75z" clipRule="evenodd" />
                        </svg>
                    </div>
                    <div className="flex flex-none items-center justify-center w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7">
                            <path fillRule="evenodd" d="M5.478 5.559A1.5 1.5 0 016.912 4.5H9A.75.75 0 009 3H6.912a3 3 0 00-2.868 2.118l-2.411 7.838a3 3 0 00-.133.882V18a3 3 0 003 3h15a3 3 0 003-3v-4.162c0-.299-.045-.596-.133-.882l-2.412-7.838A3 3 0 0017.088 3H15a.75.75 0 000 1.5h2.088a1.5 1.5 0 011.434 1.059l2.213 7.191H17.89a3 3 0 00-2.684 1.658l-.256.513a1.5 1.5 0 01-1.342.829h-3.218a1.5 1.5 0 01-1.342-.83l-.256-.512a3 3 0 00-2.684-1.658H3.265l2.213-7.191z" clipRule="evenodd" />
                            <path fillRule="evenodd" d="M12 2.25a.75.75 0 01.75.75v6.44l1.72-1.72a.75.75 0 111.06 1.06l-3 3a.75.75 0 01-1.06 0l-3-3a.75.75 0 011.06-1.06l1.72 1.72V3a.75.75 0 01.75-.75z" clipRule="evenodd" />
                        </svg>
                    </div>
                </div>
                <div className="flex flex-col space-y-2 p-2 items-center">
                    <div
                        onClick={() => {
                            currentTheme == "dark" ? setTheme("light") : setTheme("dark");
                        }}
                        className="flex items-center justify-center w-10 h-10 bg-gray-600 text-white rounded-md cursor-pointer hover:bg-gray-50 hover:text-black"
                    >
                        {currentTheme == "light" ? (
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
                                <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
                            </svg>
                        ) : (
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
                                <path fillRule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clipRule="evenodd" />
                            </svg>
                        )}
                    </div>
                </div>
            </div>
        </div>
    </div>

html

responsive-design

tailwind-css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-21 16:55:03

它只是在父div上缺少了一个position: relative;：

<div class="group flex flex-row items-center relative">
 ...
</div>

<div class="h-32 overflow-x-scroll">
  <div class="group flex flex-row items-center relative">
    <div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
    </div>
    <span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
  </div>

  <div class="group flex flex-row items-center relative">
    <div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
    </div>
    <span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
  </div>
  <div class="group flex flex-row items-center relative">
    <div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
    </div>
    <span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
  </div>
  <div class="group flex flex-row items-center relative">
    <div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
    </div>
    <span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
  </div>
  <div class="group flex flex-row items-center relative">
    <div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
    </div>
    <span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
  </div>
</div>
<script src="https://cdn.tailwindcss.com"></script>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74521210

复制

相似问题

问在flex可滚动元素中创建工具提示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在flex可滚动元素中创建工具提示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在flex可滚动元素中创建工具提示
EN