mirror of
				https://gitlab.nic.cz/turris/reforis/foris-js.git
				synced 2025-10-30 22:20:31 +01:00 
			
		
		
		
	Add Bootstrap tooltip component
This commit is contained in:
		
							
								
								
									
										38
									
								
								src/bootstrap/Tooltip.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										38
									
								
								src/bootstrap/Tooltip.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,38 @@ | |||||||
|  | /* | ||||||
|  |  * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/) | ||||||
|  |  * | ||||||
|  |  * This is free software, licensed under the GNU General Public License v3. | ||||||
|  |  * See /LICENSE for more information. | ||||||
|  |  */ | ||||||
|  |  | ||||||
|  | import React, { useEffect, useRef } from "react"; | ||||||
|  | import PropTypes from "prop-types"; | ||||||
|  |  | ||||||
|  | import { Tooltip as BSTooltip } from "bootstrap/dist/js/bootstrap.esm"; | ||||||
|  |  | ||||||
|  | export function Tooltip({ title, placement, trigger, children }) { | ||||||
|  |     const tooltipRef = useRef(); | ||||||
|  |  | ||||||
|  |     useEffect(() => { | ||||||
|  |         const tooltip = new BSTooltip(tooltipRef.current, { | ||||||
|  |             title, | ||||||
|  |             placement, | ||||||
|  |             trigger, | ||||||
|  |         }); | ||||||
|  |     }); | ||||||
|  |  | ||||||
|  |     return <span ref={tooltipRef}>{children}</span>; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | Tooltip.propTypes = { | ||||||
|  |     /** Field label. */ | ||||||
|  |     title: PropTypes.string.isRequired, | ||||||
|  |     /** Error text. */ | ||||||
|  |     placement: PropTypes.string, | ||||||
|  |     /** Help text message. */ | ||||||
|  |     trigger: PropTypes.string, | ||||||
|  |     children: PropTypes.oneOfType([ | ||||||
|  |         PropTypes.arrayOf(PropTypes.node), | ||||||
|  |         PropTypes.node, | ||||||
|  |     ]), | ||||||
|  | }; | ||||||
| @@ -30,6 +30,7 @@ export { PasswordInput } from "./bootstrap/PasswordInput"; | |||||||
| export { Radio, RadioSet } from "./bootstrap/RadioSet"; | export { Radio, RadioSet } from "./bootstrap/RadioSet"; | ||||||
| export { Select } from "./bootstrap/Select"; | export { Select } from "./bootstrap/Select"; | ||||||
| export { TextInput } from "./bootstrap/TextInput"; | export { TextInput } from "./bootstrap/TextInput"; | ||||||
|  | export { Tooltip } from "./bootstrap/Tooltip"; | ||||||
| export { formFieldsSize, buttonFormFieldsSize } from "./bootstrap/constants"; | export { formFieldsSize, buttonFormFieldsSize } from "./bootstrap/constants"; | ||||||
| export { Switch } from "./bootstrap/Switch"; | export { Switch } from "./bootstrap/Switch"; | ||||||
|  |  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user