How to make your site attractive tovisitors? This question worries almost all owners of Internet resources: merchants, bloggers, small and large business owners, 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 subject matter of the site andits target audience, people's interest in a particular product, investments, promotion, fillability and many other factors. But it can not be denied that the site "meets on clothes". It is the first and the main page of the resource that is his face, the visiting card on which the visitor should understand whether he wants to spend his time on further viewing the content.
And there is no right to make a mistake!According to the research of one of the technical universities of the United States, the first impression of the site is the visitor's appearance in less than a second. On average, a person "scans" the site in 3 seconds. Lightning speed, is not it ?!
From what the main page looks like, it dependsup to 70% of resource success. The first thing that people pay attention to is the logo, and the second is navigation. And if the logo is more or less clear, then it's worth breaking your head above the navigation, the menu and the convenience of the ergonomics of the site. There is a reasonable question: "How to decorate your site, make it as functional and convenient as possible, but beautiful?" There are a lot of unusual ideas that can be offered, but one of the most interesting ones is pop-up tips.
What are the tooltips?In addition to being an excellent mechanism for improving the functionality of the site, tooltips are a tool that allows a user to hover over an icon, word or picture to see an explanation of an image.
Tools for working with tooltips
Bootstrap can be used to create a tooltip. This is an easy-to-learn set of templates for creating applications and sites written in HTML, CSS, Sass and JavaScript.
If you specify, then for the tooltips one of the graphic elements of the Bootstrap - Tooltip template is used.
The Bootstrap framework was created for "Twitter" andwas originally called "Twitter Blint." After some changes in 2012, he received a grid of 12 columns, became adaptive and acquired the familiar name - Tooltip. A tooltip is an element that pops up when you hover over a specific item on the monitor screen.
Create a hint
You can create a Bootstrap Tooltip tooltip whenusing data attributes, as well as using the Java Script elements. There are two basic ways to create an HTML Bootstrap Tooltip. The essence of the first is to apply the data-toggle = "tooltip" attribute and the title attribute (title), which will contain the text of the tooltip. The tip will pop up from the top (default setting). It is worth remembering that the hint needs to be initialized, since automatic initialization is canceled in Twitter bootstrap for reasons of increased performance.
In order to initialize the prompts,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 reduced to activation of the tooltip using the “Javascript” code with the participation of the jQuery library by writing a tool class that includes a tooltip. The method is similar to the first, except for the method of selecting elements. Include tips in the "Java Script" in the manner shown below.
Bootstrap tooltip example
There are four main options for the location of tooltips tooltip: on the left and right edges, as well as above and below the element.
Tip above
Application tooltips
Есть множество применений Bootstrap Tooltip.You can insert tooltips so that the user can understand the translation of text from a foreign language in the text. Also, hints can be used as a tool that will help the user understand the meaning of the buttons on the panel when the cursor hovers over them. Bootstrap Tooltip templates are often used on the websites of various organizations to create a subscription to company news. This allows you to keep customers in the know, and also provides an opportunity for visitors to receive new information, such as the size of discounts, offers, changes within the company.
Consider an example when a user needs toEnter your email address in order to subscribe to the newsletter. The task of providing a subscription to a client audience for news is most easily achieved by using HTML5 and the required attribute. The tooltip hint in this case is necessary so that the user understands the sequence of actions. For example, after entering the email address, I ticked the box: “I agree to receive company news to an email address”. Below is an example of the form code.
Writing such code in HTML Bootstrap Tooltip will not be difficult. But the benefits of it are significant. Now consumers know all the news of the company. This is a kind of free advertising.
Major errors when creating tooltips
What if Bootstrap Tooltip doesn't work?The first and main error in which the tooltip attribute will not work is the tooltip is not included. In order to activate it, you need to use a special code.
This method allows you to initialize absolutely all tooltip tooltips on a web page.
The second common mistake is the absence of jQuery in the header.
For proper operation of the link, there is a prerequisite - a data processing function should be indicated, such as the Java Script.
Tooltip Properties
At its core, the Tooltip component is designed todisplay hints when you hover the mouse 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", the tooltip has the following properties:
- Active. Using the true properties in the Bootstrap Tooltip allows you to display hints, in turn, false for the same property means prohibiting the display of hints.
- AutoPopDelay is the time at which hints are displayed.
- AutoPopDelay. It is a period of time during which the mouse cursor must be hovering over an element for a tooltip to appear.
- IsBaloon. If the HTML tooltip Bootstrap Tooltip value is true, the tooltip window will look like a cloud.
- ToolTipIcon. It is a symbol that is displayed in the hint window.
In order to create beautiful pop-upshints, for example, on the 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 plugin (extension) as Tooltipster. From the title it is clear that this plugin is based on the Tooltip and is surprisingly similar in its properties and purpose. What is this plugin for? It allows you to create the necessary HTML markup inside the tooltip.
The work of the plugin is based on the insertion of shortcuts onpage. It contains all the basic attributes of HTML 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.
