{"id":"sumer9999dev/react-tooltips","name":"react-tooltips","scope":"sumer9999dev","platform":"roblox","description":"https://github.com/SUMER9999dev/React-Tooltips","version":"1.0.8","latest":"1.0.8","versions":["1.0.0","1.0.1","1.0.2","1.0.3","1.0.4","1.0.5","1.0.6","1.0.7","1.0.8"],"license":"MIT","licenseRating":"safe","licenseCaveats":[],"licenseVerified":true,"dependencies":{"jsdotlua/react":{"version":"^17.1.0","alias":"React"},"jsdotlua/react-roblox":{"version":"^17.1.0","alias":"ReactRoblox"}},"integrity":"bdde17a1ce6a4895db1a03b50c8fbe6e63362065160f37386023f12440471864","likes":0,"downloads":0,"install":"forest install sumer9999dev/react-tooltips","url":"https://forest.dev/p/roblox/sumer9999dev/react-tooltips","files":"https://api.forest.dev/ai/package/roblox/sumer9999dev/react-tooltips/files","readme":"# 🏷 React-Tooltips\r\nThis library is created to display different hints when hovering over elements, created specially for React-Lua\r\n\r\n# ☄️ Installation\r\n\r\n## Wally\r\n``react-tooltips = \"sumer9999dev/react-tooltips@1.0.4\"``\r\n\r\n## TypeScript\r\nUse this port https://github.com/Tesmi-Develop/react-tooltips-ts\r\n\r\n# 📚 Documentation\r\n\r\n## Provider\r\nFirst thing you need is creating Tooltip provider\r\n\r\n```lua\r\nReact.createElement(ReactTooltips.Provider, nil, {\r\n    ...\r\n})\r\n```\r\n\r\n## Display\r\n\r\nNow you need to create display to display hints\r\n\r\n```lua\r\nReact.createElement(ReactTooltips.Provider, nil, {\r\n    display = React.createElement(ReactTooltips.Display, {ZIndex = 9999})\r\n})\r\n```\r\n\r\nZIndex is optional, so you don't have to specify it.\r\n\r\n## Tooltip\r\n\r\nNow you can create tooltips!\r\n\r\nBut first you need to create hint element, that will display on hover\r\n\r\n```lua\r\nlocal function hint(props: {position: React.Binding<UDim2>})\r\n\tlocal state, set_state = React.useState(1)\r\n\r\n\tReact.useEffect(function()\r\n\t\tlocal connection = game.UserInputService.InputBegan:Connect(function(input)\r\n\t\t\tif input.UserInputType == Enum.UserInputType.MouseButton1 then\r\n\t\t\t\tset_state(state + 1)\r\n\t\t\tend\r\n\t\tend)\r\n\r\n\t\treturn function()\r\n\t\t\tconnection:Disconnect()\r\n\t\tend\t\t\r\n\tend, {state})\r\n\r\n\treturn React.createElement('TextLabel', {\r\n\t\tPosition = props.position,\r\n\r\n\t\tSize = UDim2.fromScale(0.1, 0.1),\r\n\t\tText = `Hello, {state}!`\r\n\t})\r\nend\r\n```\r\n\r\nFirst way to create tooltip, is to create hitbox\r\n\r\n```lua\r\nReact.createElement(ReactTooltips.Provider, nil, {\r\n    display = React.createElement(ReactTooltips.Display, {ZIndex = 9999}),\r\n    \r\n    image = React.createElement('ImageLabel', {\r\n        AnchorPoint = Vector2.new(0.5, 0.5),\r\n\r\n        Size = UDim2.fromScale(0.25, 0.25),\r\n        Position = UDim2.fromScale(0.5, 0.5),\r\n\r\n        Image = 'asset'\r\n    }, {\r\n        tooltip = React.createElement(ReactTooltips.Tooltip, {\r\n            follow_cursor = false,  -- alignment will not work if follow_cursor enabled\r\n            alignment = 'Right',  -- Left | Right | Bottom | Top, you need to set alignment or follow_cursor\r\n\r\n            appear_delay = 1,  -- optional, appear delay in seconds, will display only after hovering for 1 second\r\n\r\n            component = hint  -- here you need to put hint component\r\n        })\r\n    })\r\n})\r\n```\r\n\r\nSecond way is using ``useTooltip`` hook, that allow more flexability\r\n\r\n```lua\r\nlocal function image_tooltip()\r\n    local update_absolute_position, update_absolute_size, mouse_enter, mouse_leave = ReactTooltips.useTooltip({\r\n            follow_cursor = false,  -- alignment will not work if follow_cursor enabled\r\n            alignment = 'Right',  -- Left | Right | Bottom | Top, you need to set alignment or follow_cursor\r\n\r\n            appear_delay = 1,  -- optional, appear delay in seconds, will display only after hovering for 1 second\r\n\r\n            component = hint  -- here you need to put hint component\r\n    })\r\n\r\n    return React.createElement('ImageLabel', {\r\n        AnchorPoint = Vector2.new(0.5, 0.5),\r\n\r\n        Size = UDim2.fromScale(0.25, 0.25),\r\n        Position = UDim2.fromScale(0.5, 0.5),\r\n\r\n        Image = 'asset',\r\n\r\n        [React.Change.AbsolutePosition] = update_absolute_position,\r\n        [React.Change.AbsoluteSize] = update_absolute_size,\r\n\r\n        [React.Event.MouseEnter] = mouse_enter,\r\n        [React.Event.MouseLeave] = mouse_leave\r\n    })\r\nend\r\n\r\nReact.createElement(ReactTooltips.Provider, nil, {\r\n    display = React.createElement(ReactTooltips.Display, {ZIndex = 9999}),\r\n    image = React.createElement(image_tooltip)\r\n})\r\n```\r\n\r\n# ❤️ Credits\r\nSUMER (Discord: sumer_real) - library\r\n\r\nTesmi (Discord: tesmi) - typescript port\r\n","readmeTruncated":false}