How Does LendingTree Get Paid?
LendingTree is compensated by companies on this site and this compensation may impact how and where offers appear on this site (such as the order). LendingTree does not include all lenders, savings products, or loan options available in the marketplace.

How Does LendingTree Get Paid?

LendingTree is compensated by companies on this site and this compensation may impact how and where offers appear on this site (such as the order). LendingTree does not include all lenders, savings products, or loan options available in the marketplace.

Tooltip testing

Written by
Abigail Bassett
Published on:
Content was accurate at the time of publication.
Editorial Note: The content of this article is based on the author's opinions and recommendations alone. It may not have been reviewed, commissioned or otherwise endorsed by any of our network partners.

Disclaimer :
This is the trigger text

Title First Partner Disclosure

Content First Partner Disclosure Content First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner DisclosureContent First Partner Disclosure

If we use the shortcode below without defining a type, it will display a tooltip on hover across devices. For mobile and tablet devices, it will function as a hover effect, but the tooltip will open upon touch.
This is the trigger text This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip. You can even use shortcodes like: link shortcode

If we use the shortcode below with the defined type as “model,” it will open a tooltip as a modal across all devices.
This is the trigger text 1 for modal

modal title first

1 This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip.

If we use the shortcode below with the defined type as “hover,” the tooltip will function on hover for desktop users, while on mobile and tablet devices, it will work with a modal.
This is the trigger text 1 for hover 2 This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip. This is the trigger text 1 for hover

modal title first

2 This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip.

===========
Added: Case-1: type=”modal”: Modal design for desktop, tablet and mobile
Added: ===========
Added: Modal-Tooltip: This is the trigger text for modal

Tooltip modal design

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam.

Added: Modal-Tooltip without title: This is the trigger text for modal

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam.

Added: Modal-Tooltip with icon: This is the trigger text for modal

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam.

Added: Modal-Tooltip with icon only: Modal Tooltip

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam.

Added: Mode-Tooltip use-case in paragraph:
Added: This is the trigger text

This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip.
Added: You can even use shortcodes like: link shortcode
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. This is the trigger text

This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: You can even use shortcodes like: link shortcode
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is the trigger text

This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: You can even use shortcodes like: link shortcode

Added: 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. This is the trigger text for modal

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam.

Added: It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is the trigger text 1 for hover

modal title first

hover This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip.

Added: Modal Tooltip design: This is the trigger text 1 for modal

modal title first

1 This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip.

Added: Modal Tooltip design with icon: This is the trigger text 2 for modal

modal title second

2 This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip.

Added: ===========
Added: ===========
Added: Case-2: type=”hover”: Hover design for desktop, modal design for tablet and mobile
Added: ===========
Added: Hover-Tooltip use-case in paragraph:
Added: This is the trigger text This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip.
Added: You can even use shortcodes like: link shortcode This is the trigger text

This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip.
Added: You can even use shortcodes like: link shortcode
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. This is the trigger text This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: You can even use shortcodes like: link shortcode This is the trigger text

This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: You can even use shortcodes like: link shortcode
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is the trigger text This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: You can even use shortcodes like: link shortcode This is the trigger text

This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: You can even use shortcodes like: link shortcode

Added: Hover Tooltip design: This is the trigger text 1 for hover hover This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip. This is the trigger text 1 for hover

modal title first

hover This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip.

Added: Examples of when tooltips may be a good idea:
Added: This is the trigger text This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: You can even use shortcodes like: link shortcode This is the trigger text

This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: You can even use shortcodes like: link shortcode

Added: Tooltip design without icon: This is the trigger text This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: You can even use shortcodes like: link shortcode This is the trigger text

This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: You can even use shortcodes like: link shortcode

Added: Tooltip design with icon: This is the trigger text This is the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box. This is the trigger text

This is the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.

Added: Tooltip design without text: This is the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.

This is the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.

Added: Tooltip design without any parameter:
Added: ===========
Added: ===========
Added: Case-3: without type parameter: Hover design for desktop, tablet and mobile
Added: ===========
Added: Examples of when tooltips may be a good idea:
Added: This is the trigger text This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: You can even use shortcodes like: link shortcode
Added: Tooltip design without icon: This is the trigger text This the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: You can even use shortcodes like: link shortcode
Added: Tooltip design with icon: This is the trigger text This is the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: Tooltip design without text: This is the actual content of the tooltip. Whatever content that is wrapped in the tooltip shortcode will be inside the tooltip box.
Added: Tooltip design without any parameter:
Added: Link shortcode design:
Added: Search Google
Added: Search link
Added: This is without trigger text example:
Added: This is without any attributes example:
Added: ===========