How to implement customizable jquery Tooltip function on a link, text (or Image)?


#1

Hi,

How can implement a customizable Tooltip function to a “know more” a link, a text block, a div or (less ideally but could work) an image ?

I tried to use a title attribute on a “know more” image but the result is very poor.
The text shown been quite long, the default 1 long line image title tooltip is not attractive graphically.
I have not found a way to insert line break using a br tag for instance.

I tried to insert a jquery.tools javascript (http://jquerytools.org/demos/tooltip/…) but had not enough tech knowledge/wizdom to manage to make it work.
I am not even sure the solution works in unbounce.

I found other option like qtip2.com but once again I have not evough tech capacity to make one work, should they be comptatible with the current version of unbounce.

Last as jqery 1.4.2 is installed on my lp, I imagined there was a way to tweak a mouseover funcion. Yet I don’t know how to do it or even adapt the css…

Well, as you see, I’m stuck and I turn to the comunity to see if someone have implemented a tooltip solution.

May you can share some tips, tweaks, online ressource to check or alternate idea. All would be very welcome.

Thanks for your help.

Sebastien


#2

To whom may be interested, I finally got a CSS based Tooltip working in an HTML block.
I tried many but the most friendly one happened to be http://cbracco.me/a-simple-css-tooltip/

Enjoy
Sebastien