8

When you add a large tooltip in intro.js, it calculates whether it has space to put the tooltip on the top, bottom, left, right by doing the following:

/*
* auto determine position 
*/

// Check for space below
if (targetElementRect.bottom + tooltipHeight + tooltipHeight > windowSize.height) {
  _removeEntry(possiblePositions, "bottom");
}

// Check for space above
if (targetElementRect.top - tooltipHeight < 0) {
  _removeEntry(possiblePositions, "top");
}

// Check for space to the right
if (targetElementRect.right + tooltipWidth > windowSize.width) {
  _removeEntry(possiblePositions, "right");
}

// Check for space to the left
if (targetElementRect.left - tooltipWidth < 0) {
  _removeEntry(possiblePositions, "left");
}

It then decides to put the tooltip floating on top of the element as such enter image description here

Is there a way I can force it to make the tooltip go below the element and make the page scrollable?(dynamically change page height) (even after the actual original body has concluded)

Pranay Majmundar
  • 803
  • 7
  • 15

1 Answers1

0

UX tooltip definition is a absolute/fixed positioned element appearing near the cursor when hovering an UI item (link). IMHO you are using the wrong element type to accomplish a simple task usually done hiding/showing elements in you current scaffolding. From the mock I desume you are already in a modal window, in that modal place your tooltip html and show/hide as a simple html object so you can retain the box model and document flow you need as the browser will do the calculation for you.

Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43