How to make your site attractive to visitors? This question excites almost all owners of Internet resources: businessmen, bloggers, owners of small and large businesses, travelers and just creative people who have something to tell the world.
Why should the site be beautiful and functional?
The number of visits depends on the theme of the site and its target audience, people's interest in a particular product, investments, promotion, occupancy and many other factors. But it cannot be denied that the site is "greeted by clothes." It is the first and main page of the resource that is his face, a business card, according to which the visitor must understand if he wants to spend his time on further viewing the content.
And there is no room for error! According to the research of one of the technical universities of the USA, the first impression of the site is formed by the visitor in less than a second. On average, a person “crawls” a site in 3 seconds. Lightning speed, right ?!
Up to 70% of the success of a resource depends on how the main page looks. The first thing that people pay attention to is the logo, but the second is navigation. And if everything is more or less clear with the logo, then it’s worth breaking your mind at the navigation, menu and user-friendly ergonomics of the site. A reasonable question arises: "How to decorate your site, make it as functional and convenient as possible, but at the same time beautiful?" There are many unusual ideas that you can suggest, but one of the most interesting is the tooltips.
What are tooltips? In addition to being a great mechanism for improving the functionality of a site, tooltips are a tool that allows the user to see an explanation of a particular image when hovering over an icon, word or picture.
Tooltip Tools
Bootstrap is perfect for creating tooltips. This is an easy-to-learn set of templates for creating applications and sites written in HTML, CSS, Sass and JavaScript.
Specifically, for tooltips, one of the graphic elements of the Bootstrap template is used - Tooltip.
The Bootstrap framework was created for Twitter and was originally called Twitter Bluprint. After some changes in 2012, he got a grid of 12 columns, became adaptive and acquired the usual name - Tooltip. A tooltip is an item that pops up when you hover over a specific item on the monitor screen.
Create a tooltip
You can create a Bootstrap Tooltip tooltip using data attributes, as well as by activating Java Script elements. There are two main ways to create HTML HTML tooltip Bootstrap Tooltip. The essence of the first is to use the data-toggle = "tooltip" attribute and the title attribute, which will contain the tooltip text. The tooltip will pop up from above (default setting). It is worth remembering that the tooltip needs to be initialized, since automatic initialization has been canceled in the Twitter bootstrap for reasons of increasing performance.
In order to initialize the hints, special JavaScript is used, in which the tooltip method is restored for all elements that have the data-toggle = "tooltip" attribute. The essence of the second method is to activate a tooltip with the help of the Java Script code with the participation of the jQuery library by writing a tool class that includes a tooltip. The method is similar to the first, with the exception of the method of selecting elements. You can include hints in the Java Script using the method shown below.
Bootstrap tooltip example
There are four main options for the location of tooltip tooltips: on the left and right edges, as well as above and below the element.
Tooltip on top
Tooltip on the rightTooltip belowTooltip on the leftUsing tooltips
There are many uses of the Bootstrap Tooltip. You can insert tooltips so that the user can understand the translation of text from a foreign language in the text. Also, tips can be used as a tool that will help the user understand the meaning of the buttons on the panel when you hover over them. Bootstrap Tooltip templates are often used on sites of various organizations to create a subscription to company news. This allows you to keep customers up to date, and also provides an opportunity for visitors to receive new information, for example, about the size of discounts, offers, changes within the company.
Consider an example when a user needs to enter their email address in order to subscribe to the newsletter. The task of securing the client’s subscription to news is most easily achieved by using HTML5 and the required attribute. Tooltip hint in this case is needed so that the user understands the sequence of actions. For example, after entering the email address, I checked the box: "I agree to receive company news to the email address." Below is an example of form code.
Writing such code in HTML Bootstrap Tooltip is not difficult. But the benefits from it are significant. Now consumers know all the news of the company. This is a kind of free advertisement.
Key mistakes when creating tooltips
What to do if Bootstrap Tooltip does not work? The first and main error in which the tooltip attribute will not work is that the tooltip is not enabled. In order to activate it, you need to use a special code.
This method allows you to initialize absolutely all tooltip hints on a web page.
The second common mistake is the lack of jQuery in the header.
For the link to work correctly, there is a necessary condition - a data processing function like "Java Script" must be indicated.
Tooltip Properties
At its core, the Tooltip component is designed to display tooltips when you hover over a particular part of the page. But, in addition to the location of the tooltip on the right, left and top using data-toggle = "tooltip", tooltip has the following properties:
- Active Using the true properties in the Bootstrap Tooltip allows you to display tooltips; in turn, false for the same property means that the tooltip is not displayed.
- AutoPopDelay is the time at which prompts are displayed.
- AutoPopDelay. Represents a period of time during which the mouse cursor must be hovering over an element so that a tooltip appears.
- IsBaloon. If the value of the HTML tooltip Bootstrap Tooltip is true, then the tooltip will take the form of a cloud.
- ToolTipIcon. Represents a character that appears in the tooltip window.
Tooltipster
In order to create excellent tooltips, for example, on a site created on Wordpress, it is not necessary to thoroughly know the language of web developers. It is enough to know about the existence of such a plug-in (extension) as Tooltipster. It’s clear from the name that this plugin is based on Tooltip and is surprisingly similar in its properties and purpose. What is this plugin for? It makes it possible to create the necessary HTML markup inside the tooltip.
The plugin works by inserting shortcuts on the page. It contains all the basic HTML attributes of the Bootstrap Tooltip: content (data-tooltip-content), title, position, trigger, etc. This allows you to change the theme, font, tooltip size, color, insert a picture and do much more.