{ "id": "TanimMahbub_white-fly-43", "name": "white-fly-43", "category": "tooltips", "author": "TanimMahbub", "description": "white-fly-43 组件 (simple, tooltip, icon, black, animation, interactive)", "tags": [ "simple", "tooltip", "icon", "black", "animation", "interactive" ], "original": { "html": "
\n
\n \n \n \n \n \n

Tooltip using HTML custom data attribute & CSS content property

\n
\n\n
\n \n \n \n \n \n \n Github\n \n

Tooltip using span tag

\n
\n
", "css": "/* From Uiverse.io by TanimMahbub - Tags: simple, tooltip, icon, black */\n.wrapper {\n display: flex;\n gap: 10px;\n font-family: monospace;\n}\n\n.wrapper > div {\n text-align: center;\n}\n\n.wrapper > div + div {\n border-inline-start: 1px solid #d6cfcf;\n padding-inline-start: 15px;\n}\n\n.wrapper > div > p {\n margin-top: 15px;\n max-width: 200px;\n}\n\n.wrapper a {\n display: inline-flex;\n width: 50px;\n height: 50px;\n border-radius: 100%;\n justify-content: center;\n align-items: center;\n background-color: #191919;\n color: #d5ad72;\n position: relative;\n}\n\n.data-tooltip::before,\n.data-tooltip::after {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n transform: translateY(5px);\n transition: all 0.2s ease;\n}\n\n.data-tooltip::before {\n content: attr(data-tooltip-content);\n width: fit-content;\n font-size: small;\n font-weight: 600;\n background-color: inherit;\n padding: 3px 10px;\n border-radius: 4px;\n bottom: calc(100% + 5px);\n}\n\n.data-tooltip::after {\n content: \"\";\n border-top: 5px solid #191919;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n bottom: calc(100% + 1px);\n}\n\n.data-tooltip:hover::before,\n.data-tooltip:hover::after {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n}\n\n.span-tooltip > i {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.span-tooltip > span {\n position: absolute;\n width: fit-content;\n font-size: small;\n font-weight: 600;\n background-color: inherit;\n padding: 3px 10px;\n border-radius: 4px;\n bottom: 100%;\n visibility: hidden;\n opacity: 0;\n transition: all 0.2s ease;\n}\n\n.span-tooltip > span::before {\n position: absolute;\n content: \"\";\n width: 10px;\n height: 10px;\n border-radius: 3px;\n background-color: inherit;\n transform: rotate(45deg);\n top: calc(100% - 6px);\n left: 40%;\n}\n\n.span-tooltip > i:hover + span {\n visibility: visible;\n opacity: 1;\n bottom: calc(100% + 6px);\n}", "file_path": "/mnt/persist/workspace/Tooltips/TanimMahbub_white-fly-43.html" }, "uniapp": { "template": "\n \n \n \n \n \n \n Tooltip using HTML custom data attribute & CSS content property\n \n\n \n \n \n \n \n \n \n Github\n \n Tooltip using span tag\n \n", "script": "export default {\n name: 'GalaxyWhiteFly43',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}", "style": "\n/* From Uiverse.io by TanimMahbub - Tags: simple, tooltip, icon, black */\n.wrapper {\n display: flex;\n gap: 20rpx;\n font-family: monospace;\n}\n\n.wrapper > div {\n text-align: center;\n}\n\n.wrapper > div + div {\n border-inline-start: 2rpx solid #d6cfcf;\n padding-inline-start: 30rpx;\n}\n\n.wrapper > div > p {\n margin-top: 30rpx;\n max-width: 400rpx;\n}\n\n.wrapper a {\n display: inline-flex;\n width: 100rpx;\n height: 100rpx;\n border-radius: 100%;\n justify-content: center;\n align-items: center;\n background-color: #191919;\n color: #d5ad72;\n position: relative;\n}\n\n.data-tooltip::before,\n.data-tooltip::after {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n transform: translateY(10rpx);\n transition: all 0.2s ease;\n}\n\n.data-tooltip::before {\n content: attr(data-tooltip-content);\n width: fit-content;\n font-size: small;\n font-weight: 600;\n background-color: inherit;\n padding: 6rpx 20rpx;\n border-radius: 8rpx;\n bottom: calc(100% + 10rpx);\n}\n\n.data-tooltip::after {\n content: \"\";\n border-top: 10rpx solid #191919;\n border-left: 10rpx solid transparent;\n border-right: 10rpx solid transparent;\n bottom: calc(100% + 2rpx);\n}\n\n.data-tooltip:hover::before,\n.data-tooltip:hover::after {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n}\n\n.span-tooltip > i {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.span-tooltip > span {\n position: absolute;\n width: fit-content;\n font-size: small;\n font-weight: 600;\n background-color: inherit;\n padding: 6rpx 20rpx;\n border-radius: 8rpx;\n bottom: 100%;\n visibility: hidden;\n opacity: 0;\n transition: all 0.2s ease;\n}\n\n.span-tooltip > span::before {\n position: absolute;\n content: \"\";\n width: 20rpx;\n height: 20rpx;\n border-radius: 6rpx;\n background-color: inherit;\n transform: rotate(45deg);\n top: calc(100% - 12rpx);\n left: 40%;\n}\n\n.span-tooltip > i:hover + span {\n visibility: visible;\n opacity: 1;\n bottom: calc(100% + 12rpx);\n}\n\n", "component_name": "GalaxyWhiteFly43" }, "platforms": { "h5": true, "mp-weixin": true, "mp-alipay": true, "mp-baidu": true, "mp-toutiao": true, "app-plus": true }, "props": [ { "name": "disabled", "type": "Boolean", "default": false, "required": false, "description": "是否禁用" } ], "events": [], "slots": [ { "name": "", "description": "", "props": [] } ], "compatibility": { "h5": { "supported": true, "issues": [], "alternatives": [] }, "mp-weixin": { "supported": true, "issues": [], "alternatives": [] }, "mp-alipay": { "supported": true, "issues": [], "alternatives": [] }, "app-plus": { "supported": true, "issues": [], "alternatives": [] } }, "performance": { "complexity": "high", "bundle_size": 3792, "render_cost": "high", "memory_usage": "high" }, "dependencies": [], "examples": [ { "title": "", "description": "", "code": "" } ], "created_at": "2025-07-31T07:55:38.585Z", "updated_at": "2025-07-31T07:55:38.585Z" }