Hello, I can get this to work with a hover and content attribute in Chrome or Firefox, but not at all in IE. Caleb's hover sample on the Tooltipster page works in IE - the one that shows HTML text and an image of chocolate soufflé, but not for me. I am trying to accomplish that same type of thing, but have patterned my attributes very similarly to no avail. If anyone can shed light on this, it would be nice. On the Tooltipster home page, one of the list items shows Fixed Position and Width. It's this type of sample I'm trying to replicate. Thank you!

Hello.

I love your plugin and I want to use it instead bootstrap or foundation tooltip's plugin.

Bootstrap allow you to show the tooltips after new ajax content in this way:

$('body').tooltip({
    selector: '[rel=tooltip]'
});

It is possibile? There is a way, now?

Is it possible to have the tooltip scroll-able on the anchor element as well? When the anchor element moves, the tooltip should move too even if the below is not called.

I am using Tooltipster on elements within a Fancybox modal. Some of these are on hover and some of these remain visible for form errors. One is used specifically when you hover over the "close box" icon.

I've discovered that when you close the Fancybox, the tooltips remain on the screen. This is unavoidable when you use the close icon which also contains its own "close box" tooltip. It remains on screen with absolutely no way to get rid of it since the original element is no longer available to hover away from.

I don't know if this is a bug or a feature request. Since the box is closing, you are no longer "hovering" over the "close box" icon... shouldn't the tip automatically disappear too? (bug?)

As far as the tips that remain on the form errors, I'd like to see those vanish when the form itself vanishes within the closed Fancybox. (feature request?)

For the time being, I'm targeting each element individually in order to remove the tooltip inside of a Fancybox callback function. This is getting messy really quickly since I see no way to target all tooltips all at once within a parent container.

$('#each_target').data('plugin_tooltipster').hideTooltip();

And now I'm finding that if the target's tooltip does not exist, .hideTooltip() throws an error and nothing else works. So to close Tooltips programatically, they have to exist and they have to be targeted specifically. Like I said, this is getting really messy and growing.

I'm used to qTip2 where I could call a destroy method on any parent container and it simply removed any active Tips, if none, it simply did nothing.

Thank-you! (qTip2 totally gone from one website so far)

I have used tooltipster jquery plugin to create another jquery plugin called "ContentShare" but I am stuck with an issue.

Tooltipster fails to show the content properly for the first time when i call $(element).tooltipster('show') but from the second time onwards it works as it should.

Go through this link for more understanding. Any help would be appreciated.

On normal Monitors the tooltip finds it position right on the best place. On my iphone the tooltip-beginning oftens lies outside (above) and you can only see the last sentences, if there's a lot of text. I want to have it allways taking the best place so that you can start reading the tooltip with the beginning and scroll (by touch) down to the rest of it. How do I have to you the options to get that.

Kind regards glupto

I'd like to have two different tooltips on the same element. One triggered by hovering it. And the second should be an interactive one, triggered by clicking on the element.

Is it possible to achieve this behaviour with tooltipster?

Hi louisameline I've seen that the index.html has a little error //code.jquery.com/jquery-1.10.0.min.js should be https://code.jquery.com/jquery-1.10.0.min.js if not I get 2 errors and the plugin doesn't work

I try to add your plugin on module made for prestashop, looking with firebug all seams ok but the tooltip doesn't appear. I try with simple example like using your example code (like the red square) to avoid possible errors, but the result is the same

you you want I can give you the url to check its behavior

thanks bye

Hey, awesome plugin!

I've attached it to an SVG path (created by Raphael) for some dynamic charts, but I've run into a problem positioning the tooltip properly over the curved paths. It's currently positioned off to one side (see image: I'm hovering over the blue path)

Here's the code used for the tooltip:

$(maleArc1.node).tooltipster({
     content: 'Male Characters',
     theme: 'tooltipster-shadow'
 });

I read in other issues that there's currently no way to force the tooltip to follow the mouse pointer, but would you be able to suggest an alternative approach to reposition the tooltip? I'm by no means a developer, just good at guessing with code, so any help would be appreciated.

Thanks!

I have tooltipster element with form. When I trying put text in my field - keyboard on mobile device showed and immediately closed( I cannot focused in the first input field((

let params =  {
            contentCloning: false,
            theme: 'tooltipster-elfeya',
            side: 'bottom',
            trigger: 'click',
            interactive: true,
        };

        if(Device.data.type == 'tablet')
            params.maxWidth = 320;

        $.tooltipster.on('created', function(event){
            let origin = event.origin;
            $(origin).addClass('active');
        });

        $.tooltipster.on('ready', function(event){
            let target = $(event.tooltip);
            target.find('input[type="text"]:enabled:visible:first').focus();
            console.log(target.find('input[type="text"]:enabled:visible:first').length);
        });

        $.tooltipster.on('close', function(event){
            let origin = event.origin;
            $(origin).removeClass('active');
        });

        if (Device.data.type == 'smallmobile' || Device.data.type == 'mobile') {
            params.functionPosition = function(instance, helper, position) {
                position.coord.left = 15;
                 position.size.width = Device.data.windowWidth - 30;
                return position;
            }
        }

        $('#header .mobile-search.tooltipstered').tooltipster(params);

When I comment code in tooltispter.bundle.js, mobile keyboard work correctly, but all the same can't focus in text field when tooltip is ready. When I tap on input field Tooltipster fire reposition method and keyboard is desapear.

$(env.window)
    // reposition on resize
    // .on('resize.'+ self.__namespace +'-triggerClose', function(e) {
    //  self.reposition(e);
    // })
    // same as below for parents
    .on('scroll.'+ self.__namespace +'-triggerClose', function(e) {
        self.__scrollHandler(e);
    });

In this case tooltip show only after second click on element:

        var initTooltipster = function(container) {
            $('.tooltip', container || document).tooltipster({
                theme: 'tooltipster-shadow',
                contentAsHTML: true,
                interactive: true,
                trigger: 'click',
                functionBefore: function(instance, helper) {
                    var self = $(helper.origin);
                    if (self.is('a') && self.data('loaded') !== true) {
                        $.get(self.attr('href'), function(data) {
                            instance.content(data);
                            self.data('loaded', true);
                        });
                    }
                }
            }).on('click', false);
        };

And second question: How i can prevent go to new page if element is a, without .on('click', false) ?

Good afternoon friends. I have a lot of data in the tooltip and sometimes (spontaneously) a vertical scroll appears, sometimes it appears, sometimes not. I don't even understand why. Tell me how to remove the vertical scroll from the tooltip?

Here are my styles: ` .tooltipster-sidetip.tooltipster-noir .tooltipster-box { border: none; background: #161a1e; background: rgba(22,26,30,.9); font-size: 14px; vertical-align: center; text-align: left; overflow: visible; }

.tooltipster-sidetip.tooltipster-noir.tooltipster-bottom .tooltipster-box { margin-top: 8px }

.tooltipster-sidetip.tooltipster-noir.tooltipster-left .tooltipster-box { margin-right: 8px }

.tooltipster-sidetip.tooltipster-noir.tooltipster-right .tooltipster-box { margin-left: 8px }

.tooltipster-sidetip.tooltipster-noir.tooltipster-top .tooltipster-box { margin-bottom: 8px }

.tooltipster-sidetip.tooltipster-noir .tooltipster-arrow { height: 8px; margin-left: -8px; width: 16px }

.tooltipster-sidetip.tooltipster-noir.tooltipster-left .tooltipster-arrow,.tooltipster-sidetip.tooltipster-noir.tooltipster-right .tooltipster-arrow { height: 16px; margin-left: 0; margin-top: -8px; width: 8px }

.tooltipster-sidetip.tooltipster-noir .tooltipster-arrow-background { display: none }

.tooltipster-sidetip.tooltipster-noir .tooltipster-arrow-border { border: 8px solid transparent }

.tooltipster-sidetip.tooltipster-noir.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: #161a1e; border-bottom-color: rgba(22,26,30,.9) }

.tooltipster-sidetip.tooltipster-noir.tooltipster-left .tooltipster-arrow-border { border-left-color: #161a1e; border-left-color: rgba(22,26,30,.9) }

.tooltipster-sidetip.tooltipster-noir.tooltipster-right .tooltipster-arrow-border { border-right-color: #161a1e; border-right-color: rgba(22,26,30,.9) }

.tooltipster-sidetip.tooltipster-noir.tooltipster-top .tooltipster-arrow-border { border-top-color: #161a1e; border-top-color: rgba(22,26,30,.9) }

.tooltipster-sidetip.tooltipster-noir.tooltipster-bottom .tooltipster-arrow-uncropped { top: -8px }

.tooltipster-sidetip.tooltipster-noir.tooltipster-right .tooltipster-arrow-uncropped { left: -8px } Here Java Script Code: $('.myPopover').tooltipster({ contentAsHTML: true, scroll: false, theme: ['tooltipster-noir', 'tooltipster-noir-customized'] }); } ` Here is a screenshot

I'm working on a website where the tooltips texts could be quite long. Also one wants to display them starting from the above top left corner of the origin element. I use the following positioning function:

functionPosition: function (instance, helper, position) {
                    position.coord.top -= 10
                    position.coord.left = helper.geo.origin.offset.left
                    var availableWidth = helper.geo.window.size.width - position.coord.left
                    position.size.width = availableWidth

                    return position;
                }

The availableWidth correction is needed because the width of the tooltip is initially calculated from the tooltipster to fit the viewport and if one moves the tooltip (via position.coord.left = helper.geo.origin.offset.left) and the tooltip's width is big enough, the tooltip will exceed the viewport to the right causing horizontal scroller to appear.

So in order to avoid the scroller I resize the tooltip, which works correct with the width. The problem is then with the height. It stays unchanged and this causes vertical-scroller within the tooltip to appear.

How could one avoid that? I tested with maxWidth set initially and it works perfect - the size of the tooltip box is calculated so no scrollers appear (when possible, a.k.a the tooltip text is not too long).

So with one origin element I could calculate the availableWidth with javascript bevorhand and then give its value to the tooltipster constructor options.

This solution is not very convenient with more origin elements and it does not work at all when the user changes the viewport size (through resize for example. One could listen for resize and do the recalculation and re-instantiate all of the tooltips , but that would be an overkill)

The problem is one couldn't change the maxWidth dynamically (as far as I know - I would be glad to be wrong on that :) ). I tried to "hack" it using instance.__options.maxWidth = availableWidth in the functionPosition, but it didn't work.

Or put it another way - if one changes the width in functionPosition the height won't be resized automatically to fit the content and there is no a function to force that (AFAIK).

Thanks for any help or other workarounds in advance!

The names of the stylesheets and javascripts from the downloaded tooltipster-master zip file are tooltipster.main.css and tooltipster.main.min.js. In your instructions you say to move tooltipster.css and jquery.tooltipster.min.js to your root's CSS and JavaScript directories but I can't find files with these names. Also, I don't know which directory to use. The CSS and JavaScript is in 2 different directories, which one is the one that I need?

C:\xampp\htdocs\physicssimulation\tooltipster-master\tooltipster-master\dist

C:\xampp\htdocs\physicssimulation\tooltipster-master\dist

We have the impression that the version Tooltipster v3.1.0 is incorrectly classified as malware / malicious script by the protection software BitDefender and is blocked at the users with output of a danger warning. Can anyone confirm this?

I can work with interactive with delay (leave delay) equal 0.

Please visit the tooltip competitor https://codesandbox.io/s/material-demo-forked-smssv?file=/demo.js For me is mandatory to use tooltipster

I don't want this behaviour either, please show next image:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tooltipster interactive not working with delay 0</title>

    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.0.3/css/tooltipster.bundle.css"
    />
    <script
      type="text/javascript"
      src="https://code.jquery.com/jquery-1.12.4.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.0.3/js/tooltipster.bundle.min.js"
    ></script>
  </head>
  <body>
    <span
      class="demo-interact"
      title="Try clicking &lt;a href='http://google.com/' target='_blank'&gt;this link&lt;/a&gt;"
    >
      Hover
    </span>

    <span
      class="demo-interact"
      title="Try clicking &lt;a href='http://google.com/' target='_blank'&gt;this link&lt;/a&gt;"
    >
      Hover
    </span>

    <span
      class="demo-interact"
      title="Try clicking &lt;a href='http://google.com/' target='_blank'&gt;this link&lt;/a&gt;"
    >
      Hover
    </span>

    <span
      class="demo-interact"
      title="Try clicking &lt;a href='http://google.com/' target='_blank'&gt;this link&lt;/a&gt;"
    >
      Hover
    </span>

    <span
      class="demo-interact-50"
      title="Try clicking &lt;a href='http://google.com/' target='_blank'&gt;this link&lt;/a&gt;"
    >
      Hover
    </span>
  </body>
  <script>
    // Interactive not working

    $(".demo-interact").tooltipster({
      contentAsHTML: true,
      interactive: true,
      delay: [0, 0],
    });

    // Interactive working but I don't want overlay behaviour
    $(".demo-interact-50").tooltipster({
      contentAsHTML: true,
      interactive: true,
      delay: [0, 50],
    });
  </script>
</html>