pavel_frankov supports this item


14 comments found.

Very nice work. Congratz

Thank you!

How can we interage TouchTooltip with wordpress ?

After adding touch-tooltip.css and touch-tooltip.js (see documentation) to your wordpress theme you can simply use text mode in wordpress editor:

I’m working on wordpress plugin right now to make it more easy.

Thank you for your answer.

Is it possible to integrate with images?

Yes, of course! Native CSS:
<span class="ApplyTooltip">
  <img />
  <span class="TouchTooltip Top Default">
    <span class="Content">Tooltip's content</span>
JS needed:
<img class="ApplyTooltip" title="Tooltip's content" />

Hi Pavel,
Very interesting item :)
I bought it from envato mobile bunddle ; i i read comments and i would like to know what’s about the wordpress version .
Thank you
Best regards

I’m very flattered, thank you! Check my TouchTooltip WordPress plugin.

hi Pavel, bought :)

Thank you!

I am having trouble getting my tooltips to stay open on touch in Safari on iPad (I haven’t been able to test it in any other Safari devices).

Try touching any of the “Local Tips” in the Itinerary Section on this page:

It works in all other Windows browsers tested (FF, CH, IE9+) and in Android (Chrome and Firefox). Any thoughts? Thanks!!

Thank you for feedback! It looks so strange… I need more time to understand what happens. Sorry for that.

Please, send me email and I’ll instantly send you fixed touch-tooltip.js

I’m glad I ran across the note from clogic! I’ve just purchased the WordPress version of TouchTooltip (even though I always enter code directly into the WordPress editor).

Anyway, I ran into the exact same problem that clogic describes and have been looking for an answer. In my project, I’m using images as triggers for the tooltip and everything appears to be working well on all other browsers and on Android.

However, Safari on iPad is a problem. If the tooltips work, they fly out OK but fade too quickly to read. Sometimes they do stick but the behavior is unpredictable. Maybe clogic and I have the same problem?

Here is the code I’m using:

<div class="ApplyTooltip" style="position: absolute; left: 10%; top: 37%;">
<img src="[mypath]image.png" alt="Image" width="135" height="141" />
<div class="TouchTooltip Large Shadow Round Left Center Metro Blue">
<div class="Content">Here is my content</div>

Thank you for feedback! I will update TouchTooltip on Codecanyon, but it can take several days. Please, send me email and I’ll instantly send you fixed touch-tooltip.js

That seems to work! Thank you very much!

I have found an additional error that seems to be non-critical, but FYI. When I go to the WordPress Media page and select an item to edit, this warning appears at the bottom of the page:

Warning: file_get_contents() [function.file-get-contents]: php_network_getaddresses: getaddrinfo failed: Name or service not known in /home/[siteaddress]/wp-content/plugins/touch-tooltip/touch-tooltip.php on line 57

Nothing seems to be affected, though….

Sorry, but I can not reproduce it. Can you try on different WP?

Hello, Pavel. I’m having difficulties to insert a image inside the ToolTip, using a word as link in the middle of the text. When I choose the word, the line breaks. I.e., I have the text:

Here is a list of JavaScript depended features

and I’d like to open an image in JavaScript word, but text appears like this:

Here is a list of
Javascript depended features

How can I fix this? Thank you.

Solved. I was using div class and changed to span class.

Thank you!

Thank you for purchasing :)


I am thinking in buyng. Do this work with form inputs?


very nice and flexible widget. For non-touch devices, can I change the behavior to be “on click” as opposed to “on mouseover”. Thanks

Thanks! Yes, you can, but it would not be a simple task: you should change SCSS files and change :hover to some class name. Then you should change JS file and add that class to the tooltip every time when it was clicked. Then you should build CSS from SCSS: you can find the instructions in the documentation.

Thanks for the very quick response. I’ll try that.

HI Pavel. I’m trying to use the Metro color and change the color of purple to black (I’m keeping the name of “purple”) by using #000000 in the CSS file, but it’s still purple. Anywhere else do I need to change the color?

Hi! Thanks for purchasing! You should change SCSS files instead of CSS. You can find building instructions in the documentation.

Hi, great product thank you. The tooltip is working fine with mouse over but I can’t seems to get the border bottom dotted to appear below the target text? Here’s a sample of the code: Hover over me Also, the touch to display the tooltip isn’t working on my mobile device. Any thoughts? Thanks

oops, code didn’t show in my comment. I’ll try again without the span brackets: span class=”ApplyTooltip” title=”tooltip content” data-styles=”Shadow Bottom Left Dark”>test 121</span

Hi! Thanks for reply! TouchTooltip doesn’t provide any additional visual styles to the links. To create dotted links you should probably use border-bottom property on desired CSS-selector. There are examples in the docs dir.

Also, it looks like your example is not complete. Use pre tag to format your example.

Yes, I missed adding that to the .ApplyTooltip class. All working fine now thank you. Cheers