jQWidgets Forums

Tagged: jQuery Tooltip, Tooltip

This topic contains 7 replies, has 3 voices, and was last updated by alexbible 9 years, 11 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Tooltip Containing New Page Posts
June 11, 2012 at 5:47 pm Tooltip Containing New Page #4814

shimmoril
Participant

Is is possible to create a tooltip w/ jqwidgets that contains a whole new page? For example, I am currently using qtip, which allows me to specify a URL for my content.

June 12, 2012 at 7:22 am Tooltip Containing New Page #4840

Peter Stoev
Keymaster

Hi shimmoril,

What do you mean by displaying “whole new page” – display the HTML of a page i.e load the tooltip’s content via Ajax or display a page within iframe in a tooltip?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 12, 2012 at 5:58 pm Tooltip Containing New Page #4859

shimmoril
Participant

I mean that I currently have page A, which contains tooltips which load page B. Separate pages w/ separate data and HTML. Of your two options I think it’s the AJAX one, but I’m not entirely sure what you mean by that.

June 14, 2012 at 10:59 am Tooltip Containing New Page #4924
Peter Stoev
Keymaster
Hi shimmoril,

It is possible to make the tooltip to display HTML, but the HTML string should be set during the tooltip’s initialization. If you want to load the content via Ajax call, you can create the tooltip in the jQuery ajax’s success function.

For example:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxTooltip").jqxTooltip({ showHtml: true, width: 250});
            var element = $('#bottomRight');
            $("#jqxTooltip").jqxTooltip('add', element, '<b>My Tooltip</b>');
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style='margin-left: 50px; font-family: Verdana Arial; font-size: 13px;
        width: 400px;'>
        <div>
            Move cursor to any gray rectangle below to display a Tooltip:
        </div>
        <div style='margin-left: 40px; margin-top: 50px;'>
            Bottom-Right
        </div>
        <div id='bottomRight' style='background: Gray; margin-left: 50px; margin-top: 10px;
            width: 10px; height: 10px;'>
        </div>
        <div id='jqxTooltip'>
        </div>
    </div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
June 14, 2012 at 3:14 pm Tooltip Containing New Page #4936

shimmoril
Participant

Can you provide an example of “create the tooltip in the jQuery ajax’s success function.”? My tooltip page is too complicated to be recreated in the Javascript.

June 15, 2012 at 3:14 pm Tooltip Containing New Page #4979

Peter Stoev
Keymaster

Hi shimmoril,

If your page is complicated, it might be a better solution to add ‘iframe’ tag in the tooltip and set its ‘src’ attribute to point to your page.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 15, 2012 at 3:31 pm Tooltip Containing New Page #4980

shimmoril
Participant

Ahh, that would make much more sense. It’s also very similar to what we’re currently doing. Thanks for your helping walking through this Peter.

June 22, 2015 at 10:15 pm Tooltip Containing New Page #72856

alexbible
Participant

Hi, I’m trying to put big tooltips inside the grid and I need them to be rendered as iframe.

I found “qTip2” and was able to copy how it works here:
http://talmidimedition.x40x.net/_jQwidgets/mobiledemos/jqxgrid/_qTip2.html

Here’s what I’m trying:
http://talmidimedition.x40x.net/_jQwidgets/mobiledemos/jqxgrid/_grid_with_tooltips_each_word.htm

Thanks for all your help!
Alex
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.