Link in tooltip? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: autoHide, close, hide, jqxTooltip, open, show, Tooltip

This topic contains 3 replies, has 2 voices, and was last updated by Nadezhda 9 years, 4 months ago.

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

Author

Link in tooltip? Posts
May 9, 2015 at 3:20 pm Link in tooltip? #70876

timwoj
Participant

I’d like to open a tooltip with a href link in it, but as soon as I mouse away from the element that opens the tooltip, it vanishes. I don’t really want to add click-to-close to the tooltips just out of ease-of-use concern. Is there a way to modify the closing() event to not actually close, based on the result of the function? I’m wondering if I can check the mouse position and keep it from closing if the mouse is in the tooltip. Is that possible?

May 11, 2015 at 11:23 am Link in tooltip? #70927
Nadezhda
Participant
Hello timwoj,

If I understand you correctly, you would like to show opened tooltip on mouse hover over it. To achieve this you can set the ‘autoHide’ property to false. If this does not help you, please, provide us with more information or sample code.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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 () {
            $("#filmPicture1").jqxTooltip({ content: '<b>Title:</b> <i>The Amazing Spider-man</i><br /><b>Year:</b> 2012', position: 'right', name: 'movieTooltip', autoHide: false });
            $("#filmPicture2").jqxTooltip({ content: '<b>Title:</b> <i>The Avengers</i><br /><b>Year:</b> 2012', position: 'right', name: 'movieTooltip', autoHide: false });
            $("#filmPicture3").jqxTooltip({ content: '<b>Title:</b> <i>The Dark Knight Rises</i><br /><b>Year:</b> 2012', position: 'right', name: 'movieTooltip', autoHide: false });
        });
    </script>
</head>
<body>
    <div style="width: 400px;" id="container">
        <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" />
        <img style="margin: 8px;" src="../../images/The_Avengers.jpg" id="filmPicture2" />
        <img style="margin: 8px;" src="../../images/The_Dark_Knight_Rises.jpg" id="filmPicture3" />
    </div>
</body>
</html>
```
Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
May 13, 2015 at 2:13 am Link in tooltip? #71034

timwoj
Participant

I would like it to automatically hide unless the user moves the mouse into the tooltip, where they can possibly click on a link. Auto-hide would work except it requires the user to click on the tooltip to make it go away.

May 13, 2015 at 9:55 am Link in tooltip? #71060

Nadezhda
Participant

Hi timwoj,

This cannot be achieved, unfortunately, but if you want you can set ‘closeOnClick’ property to false to disable closing tooltip on click.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

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

You must be logged in to reply to this topic.