TOOLTIPS & POPOVERS

We hand pick the best services from our extensive design and development toolkit to create amazing tooltips and popovers with great options.

[kleo_divider type=»long» position=»center» text=»Tooltips attached to buttons»][kleo_gap size=»20px»]
[kleo_button title=»Tooltip on right» style=»default» tooltip=»tooltip» tooltip_position=»right» tooltip_title=»Tooltips are great for short infos» tooltip_action=»hover»]
[kleo_button title=»Tooltip on top» style=»default» tooltip=»tooltip» tooltip_position=»top» tooltip_title=»Tooltips are great for short infos» tooltip_action=»hover»]
[kleo_button title=»Tooltip on hover» style=»default» tooltip=»tooltip» tooltip_position=»bottom» tooltip_title=»Tooltips are great for short infos» tooltip_action=»hover»]
[kleo_button title=»Tooltip on left» style=»default» tooltip=»tooltip» tooltip_position=»left» tooltip_title=»Tooltips are great for short infos» tooltip_action=»hover»]
[kleo_divider type=»long» position=»center» text=»Tooltips attached to pins & icons»][kleo_gap size=»20px»]
[kleo_pin type=»circle» icon=»doc» tooltip=»tooltip» tooltip_position=»right» tooltip_title=»Tooltips are great for short infos» tooltip_action=»hover» css_animation=»el-appear» animation=»animate-when-almost-visible» top=»20px» right=»30px»]
[kleo_pin type=»circle» tooltip=»tooltip» tooltip_position=»top» tooltip_title=»Tooltips are great for short infos» tooltip_action=»hover» css_animation=»pulsate» animation=»animate-when-almost-visible» top=»20px» right=»30px»]
[kleo_icon icon=»folder-empty» tooltip=»tooltip» tooltip_position=»top» tooltip_title=»Tooltips are great for short infos» tooltip_action=»hover» icon_size=»2x»]

Attached to an icon

[kleo_icon icon=»doc» icon_size=»2x» tooltip=»tooltip» tooltip_position=»top» tooltip_title=»Tooltips are great for short infos» tooltip_action=»hover»]

Attached to an icon

[kleo_divider type=»long» position=»center» text=»Popovers attached to buttons»][kleo_gap size=»20px»]
[kleo_button title=»Popover on right» style=»default» tooltip=»popover» tooltip_position=»right» tooltip_title=»Popovers are great for additional infos» tooltip_action=»hover» tooltip_text=»Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.»]
[kleo_button title=»Popover on top» style=»default» tooltip=»popover» tooltip_position=»top» tooltip_title=»Popover title» tooltip_action=»hover» tooltip_text=»Lorem Ipsum is simply dummy text of the printing and typesetting industry.»]
[kleo_button title=»Popover on hover» style=»default» tooltip=»popover» tooltip_position=»bottom» tooltip_title=»Popover title» tooltip_action=»hover» tooltip_text=»Lorem Ipsum is simply dummy text of the printing and typesetting industry.»]
[kleo_button title=»Popover on click» style=»default» tooltip=»popover» tooltip_position=»left» tooltip_title=»Popover title» tooltip_action=»click» tooltip_text=»Lorem Ipsum is simply dummy text of the printing and typesetting industry. Ut enim ad minim veniam, quis nostrud exercitation ullamco»]
[kleo_divider type=»long» position=»center» text=»Popovers attached to pins & icons»][kleo_gap size=»20px»]
[kleo_pin type=»circle» icon=»doc» tooltip=»popover» tooltip_position=»right» tooltip_title=»Popovers are great for additional infos» tooltip_action=»hover» css_animation=»el-appear» animation=»animate-when-almost-visible» tooltip_text=»Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s» top=»20px» right=»30px»]
[kleo_pin type=»circle» tooltip=»popover» tooltip_position=»top» tooltip_title=»Popover title» tooltip_action=»hover» css_animation=»pulsate» animation=»animate-when-almost-visible» tooltip_text=»Lorem Ipsum is simply dummy text of the printing and typesetting industry» top=»20px» right=»30px»]
[kleo_icon icon=»folder-empty» icon_size=»2x» tooltip=»popover» tooltip_position=»top» tooltip_title=»Popover title» tooltip_action=»hover» tooltip_text=»Lorem Ipsum is simply dummy text of the printing and typesetting industry»]

Attached to an icon

[kleo_icon icon=»doc» icon_size=»2x» tooltip=»popover» tooltip_position=»top» tooltip_title=»Popover title» tooltip_action=»hover» tooltip_text=»Lorem Ipsum is simply dummy text of the printing and typesetting industry»]

Attached to an icon

©2015 Maquina y Lubricantes del Noroeste S.A. DE C.V.