Databases
StackOverflow2013
Postsdbo
POHow do I constrain the size of a tooltip/popup-style DIV so that it doesn't trigger scrollbars on the page
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I constrain the size of a tooltip/popup-style DIV so that it doesn't trigger scrollbars on the page
    primarykey
    data
    text
    <p>The mouse hovers over an element and a tip appears. The tip overflows the page, triggering a scrollbar, which changes the layout just enough so that the underlying element that triggered the tip is no longer under the mouse pointer, so the tip goes away.</p> <p>The tip goes away, so the scrollbar goes away, and now the mouse is again over the element.</p> <p>Wash, rinse, repeat.</p> <p>If I could make sure that tip isn't too big so as to trigger scrollbars, that would solve my problem.</p> <p>EDIT: After reading comments, some things to clarify: The div contains text which can vary. If I can, I want to show all the text. The div's location needs to be near the element the mouse's tip is over. So the key is, I need to know whether to truncate the text.</p> <p>I did find this link:<br> <a href="http://www.howtocreate.co.uk/tutorials/javascript/browserwindow" rel="nofollow noreferrer">http://www.howtocreate.co.uk/tutorials/javascript/browserwindow</a><br> which contains this piece of the puzzle, figuring out how big the browser window is: </p> <pre><code>function alertSize() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement &amp;&amp; ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body &amp;&amp; ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } window.alert( 'Width = ' + myWidth ); window.alert( 'Height = ' + myHeight ); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USCorey Trager
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow do I constrain the size of a tooltip/popup-style DIV so that it doesn't trigger scrollbars on the page
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow do I constrain the size of a tooltip/popup-style DIV so that it doesn't trigger scrollbars on the page
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow do I constrain the size of a tooltip/popup-style DIV so that it doesn't trigger scrollbars on the page
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload