Open sideshot opened 3 months ago
How do you set a target ID to be used with the tooltip? Similar to the non-react version. This is to limit repeating the same tooltip.
Non-React Version
<button **data-tooltip-target="tooltip-default"** type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default tooltip</button> <div **id="tooltip-default"** role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Tooltip content <div class="tooltip-arrow" data-popper-arrow></div> </div>
React Version Doesn't work like this.
<Tooltip target="tooltip-default"> <Button>Default tooltip</Button> </Tooltip> <div id="tooltip-default" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"> Tooltip content <div class="tooltip-arrow" data-popper-arrow></div> </div>
Some question. My layout cover tooltips if they placed in tight width block.
How do you set a target ID to be used with the tooltip? Similar to the non-react version. This is to limit repeating the same tooltip.
Non-React Version
React Version Doesn't work like this.