magic-tooltip
A tooltips with some magic.
Build Setup
# add package to Your project via yarn or npmyarn add magic-tooltip
How to use?
For more information check this story.
Basic example
Import components. There are three parts of this puzzle:
- MagicTooltipDisplay - global component for disaplaying stuff.
- MagicTooltipStore - Vuex store for global display.
- MagicTooltip - component which will trigger the display.
Setup store
It can be used in few ways depending on Your Vuex store configuration
// useing as a moduleconst state = MagicTooltipStorestateconst mutations = MagicTooltipStoremutationsconst actions = MagicTooltipStoreactionsconst getters = MagicTooltipStoregetters
Then regular component usage stuff
;
<!-- inside of some component --><!-- the list or some other wrapper --><!-- the row -->#{{ row.id }}...more components or content of the row goes here...<!-- this slot will be trigger for the tooltip -->{{row.username}}<!-- this slot will be sent to globaltooltip display when target is hovered -->{{row.name}}{{row.company.catchPhrase}}{{row.company.name}}{{row.website}}<!-- this is global component --><!-- make sure You have only one this per entire page -->
Don't forget to register imorted components. Enjoy!