{"id":1741,"date":"2010-11-15T10:24:58","date_gmt":"2010-11-15T15:24:58","guid":{"rendered":"http:\/\/mts-help.nick.php.dev\/after_sale_support\/jquery\/tooltips\/article2.html"},"modified":"2020-02-06T10:15:47","modified_gmt":"2020-02-06T15:15:47","slug":"easytooltip-tooltip","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/easytooltip-tooltip.html","title":{"rendered":"\u201ceasyTooltip\u201d Tooltip"},"content":{"rendered":"This is a Tooltip Script that uses easyTooltip plug-in.
By default this plugin will read the title attribute of the element and convert it into fade-in tooltip that you can style any way you want. Important note, it doesn’t have to be an anchor tag. You can apply this script to any element(s) you want.
The one big thing that makes this different from my first version is that you are now allowed to put custom content, any html content you want – images, long paragraphs, link lists… anything. If you hate writing HTML code inside a JavaScript variable, this plugin allows you to use inner HTML from any element on the page. It means that you can write HTML directly on the page, as you normally do, hide that element with CSS and have it appear as a tooltip on mouse over. Take a look at the demos for more info.

JavaScript<\/span>
In order to make the script work, the index-#.html<\/span> file with a slider should contain these lines of HTML code in order to include easyTooltip.js<\/span> script and jQuery framework:

<\/p>

The <head><\/span> section of the index-#.html<\/span> file contains these lines of code that initialize the script functionality with basic values:<\/p>

By default a tooltip is added to links (<a><\/span> tags) with .tooltips<\/span> class that are placed to an element (<ul><\/span> tag) with .work-list<\/span> class. Here you can add the script attributes to define the following values:<\/p>

\u2022    xOffset<\/span> – offset to the left from the cursor (in pixels). Default setting is 10<\/span>;
\u2022    yOffset<\/span> – offset to the top from the cursor (in pixels). Default setting is 25<\/span>;
\u2022    tooltipId<\/span> – use this if you want to assign custom id to your tooltip. Also, if you have multiple tooltips on one page and you want to style them differently, use ID’s to assing different css definitions. Default setting is easyTooltip<\/span>;
\u2022    clickRemove<\/span> – by default tooltip disapears once you rool out of the element. Using this options you can remove tooltip by clicking on the element. Default setting for this option is false<\/span>;
\u2022    content<\/span> – by default Easy Tooltip displays title<\/span> attribute of an element. Use this option to send a custom content to the tooltip. Default setting for this option is “”<\/span> (empty);
\u2022    useElement<\/span> – if you’d like to display more complex HTML in your tooltip and yet you hate writing it inside a content<\/span> option, you can use a certain element’s inner HTML.<\/p>

HTML<\/span>
Below you can see the HTML script representation:<\/p>

The HTML part is represented by a bulleted list. The script will get title<\/span> attribute content and create a tooltip from it.<\/p>

CSS<\/span>
You can find script related stylesheet in the main style.css<\/span> file. You will need to modify the following styles:<\/p>

Here #easyTooltip<\/span> styles define the tooltip appearance.<\/p>","protected":false},"excerpt":{"rendered":"

This is a Tooltip Script that uses easyTooltip plug-in. By default this plugin will read the title attribute of the element and convert it into fade-in tooltip that you can style any way you want. Important note, it doesn’t have to be an anchor tag. You can apply this script to any element(s) you want. […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[260],"tags":[813,976],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1741"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=1741"}],"version-history":[{"count":5,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1741\/revisions"}],"predecessor-version":[{"id":86425,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1741\/revisions\/86425"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}