Link to home
Start Free TrialLog in
Avatar of eddyperu
eddyperuFlag for United States of America

asked on

How can I make work links inside my tooltip?

Hi Expert,
I am new in Jquery so I might need a lot of help.
I have created a tooltip with jquery, actually I took the code from this place  http://elijahmanor.com/webdevdotnet/post/qTip-Tooltip-with-jQuery-UI-ThemeRoller-Support.aspx

So far it is working but there are some features that it is not letting me do:
1) I can't get my mouse inside the toltip, every time that I do that the tooltip disappears, i need to do that because there are some links inside the tooltip that the client will want to click.
2)  I replace  the:
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>     with this
 <script src="jquery-1.4.1.js" type="text/javascript"></script>

And I have notices that the little triangle attach to the tooltip that is pointing to the link have disappear, why is that?
If there is another better idea how to do this please feel welcome to light me...
Thanks
 
<head>
    <title></title>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>
    <script src="jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>    
    <script type="text/javascript">
        $(function() {

            $('#customTheme a[title]').qtip({
                position: {
                    corner: {
                        target: 'rightTop',
                        tooltip: 'leftBottom'
                    }
                },
                style: {
                    border: {
                        width: 5,
                        radius: 10,
                        color: '#017DC3'
                    },
                    background: '#ffffff',
                    color: '#000000',
                    padding: 10,
                    textAlign: 'left',
                    tip: true
                }
            });

        });          
    </script>
    
</head>
<body>
    
    <div id="customTheme" class="panel">
        <h3>Custom Themes</h3>
        <a href="http://www.google.com" title="This is my first link with <b>bolded</b> and <u>underlined</u>">1st Link</a>
        <a href="http://www.google.com" title="This is my second link with <b>bolded</b> and <u>underlined</u>">2st Link</a>
    </div>


</body>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Steve Krile
Steve Krile
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Also just noticed that the author of qTip says that jquery core 1.4 is not supported yet.  End of March 2010 was the promised date.
Avatar of eddyperu

ASKER

Thank you buddy