0

I'm using the jquery tooltipster plugin (https://iamceege.github.io/tooltipster/) and I'm having a problem with the positioning. I place images on a map and position them absolutely. I want the tooltip to appear at the bottom, but I can't get it to work: they keep appearing at the top of the image and the upper bit of the tooltip goes offscreen (see here - tooltip appears when hovering over the tree).

This is my code: can anybody give me an idea what I'm doing wrong? Or why the tooltip doesn't appear at the bottom?

    <script>
        $(document).ready(function() {

            $('#tt1').tooltipster({
                minWidth: 400,
                maxWidth: 400,
                content: $('<span><p><strong>Duffel-West</strong><br>&nbsp;<br><img src="006.jpg"><br>&nbsp;<br>Kwb herorienteren in Duffel. Hoe kunnen we via het transitieverhaal nieuwe leden vinden? Op de infoavond rond de stroomafschakelingsprocedure zijn er mensen gevonden om een repair cafe te organiseren. Dit repair cafe was een succes met meer dan 100 bezoekers. Het is nu de bedoeling om dit twee maal per jaar te organiseren. Alsook dit te combineren met andere transitieactiviteiten.  <br>&nbsp;<br><strong>Status</strong><br>Kwb Duffel-West  slaagt in zijn herorienteringsproces. </span>'),
                position: 'bottom'
            });
        });
    </script>
</head>

<body>
    <img src="i1.png" width="30" height="41" id="tt1" style="position: relative; left:250px; top: 270px; cursor:crosshair" class="tooltip 1" title="Duffel West">
</body>
topher
  • 14,790
  • 7
  • 54
  • 70
StevenCl
  • 47
  • 6

1 Answers1

0

It is produced because your element position. Your tooltip doesn't fit in bottom because it is less space than the top. You can view it working in this fiddle:

http://jsfiddle.net/dj2tvjjs/

In the top image you must view the tooltip with bottom position, but in the bottom image you must view the top position of the tooltip with the same code to initialize

$('#tt1, #tt2').tooltipster({
    position: 'bottom'
});
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • Thanks for the answer. The problem is: I need the tooltip to appear at the bottom and I can't change the position of the image element (in the final version it appears on a map of a country). – StevenCl Aug 10 '15 at 10:23
  • Tooltipster v3 does not let you force the position to 'bottom' if there is not not enough space at the bottom, it will indeed switch to the opposite direction. However, Tooltipster v4 does let you force a position. v4 is currently in development but is due in the coming weeks. – Louis Ameline Aug 10 '15 at 11:19