Tool tip window centered in browser

javascript7 · June 22, 2019, 8:51pm

I am struggling with getting this span text in the middle of the window, regardless if the browser window is full screen or sized. Any help would be appreciated.

<style>
span.dropt {background: yellow;}
span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; cursor: pointer;
}
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;}
span.dropt:hover span {left: 2%; background: #ffffff;} 
span.dropt span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
  border-style:solid; border-color:black; border-width:1px;}
span.dropt:hover span {margin: 20px 0 0 360px; background: #c4d7dd; z-index:6;} 
</style>

coothead · June 22, 2019, 10:15pm

Hi there javascript7,

your post lacks the one vital ingredient that would give our
members a chance, perhaps, of resolving your problems.

A pinch of the relevant HTML should do the trick.

coothead

javascript7 · June 22, 2019, 10:43pm

I didn’t think that would affect anything, but here it is:

<span class="dropt" title="">ALERT<span style="width:750px;">My message goes here</span></span>

I was changing this for placement but would like it centered in the middle of window regardless of window size.

Thank you for your help, appreciated.

John_Betong · June 23, 2019, 12:07am

Give a span a width and it will have no effect unless a block property is added.

The script should be enclosed in a div which has a default width of 100% and add text-align: center; which will apply to all the enclosed elements,

Also try adding a temporary div background colour or border to help indicate the effect on the complete page.

Edit:

Also try adding an empty div with a background colour… i think the color will not show because the div default height is zero

coothead · June 23, 2019, 12:08am

Hi there javascript7,

try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

.dropt {
    position:relative;
 }

.dropt > span {
    background: #ff0;
    cursor: pointer;
  }
.dropt > span:hover {
    background: #fff; 
 }

.dropt span span { 
    position: absolute;
    z-index: 2;
    left: -999em;
    width: 75%; 
    max-width: 46.875em;
    padding: 0.25em;; 
    margin-top: 2em;
    border: 1px solid  #000;
    background: #c4d7dd; 
 }

.dropt > span:hover  span,
.dropt > span:active span {
    left: 50%;
    transform: translate( -50%, 0 );
 } 
</style>

</head>
<body>
 
 <div class="dropt">
  <span title="">ALERT
   <span>My message goes here</span>
  </span>
 </div>

</body>
</html>

coothead

javascript7 · June 23, 2019, 6:08am

Thank you for that.

Did a markup with that code on separate html page and it worked fine.
Applied that code to my working page and it worked although the box wasn’t as wide as the markup. Seemed about 400 pixels. Is there a way to make that larger (wider)?
I have a 2nd tooltip on the same page and that one didn’t work in that it was very narrow and long down the page. Can’t, as of yet, figure out why. Working on that though.
These tooltips are in a table - does that make a difference? On my existing code it works real good except for the fact that I can’t center it on the page.
Is there code to alter my existing code to center it?

Thank you.

javascript7 · June 23, 2019, 6:15am

Not sure if you are talking about this:

<span style="width:750px;">

…but when I change the width on this it does change accordingly.

Not really sure what you are referring to and /or how to handle that.

Thank you.

coothead · June 23, 2019, 9:47am

That was the reason why I asked you to supply the relevant HTML

coothead

javascript7 · June 23, 2019, 10:13am

With my existing code which I have all in a td tag, makes no difference if in a table or not. Just not centered as preferred.

Your first bit of code worked fine in td tag - the second tooltip on page in td tag didn’t. So it would seem to me that tables have nothing to do with it. I will double checking to be sure I removed the old code and replaced it with your.

On my code, if I change the 360px to another number, it changes positions on page (left to right). I understand that. Is there not code used in lieu of that line that centers on page? That would seems the simplest way. But perhaps it’s not that easy.

coothead · June 23, 2019, 10:22am

It certainly does.

This statement…

…confirms it.

If you don’t supply the relevant HTML,
how can we supply the relevant CSS?.

coothead

John_Betong · June 23, 2019, 11:39am

It is only possible to hazard a guess with the supplied script snippet because CSS is an abbreviation of Cascading Style Sheets. The basic idea is to declare a condition once only and for the condition to apply for he remaining script.

Wiki: DRY Principle

javascript7 · June 23, 2019, 3:53pm

Here’s the code that goes with my original CSS. The only thing that is an issue for me is it doesn’t center on the screen. Thanks.

<td width="400" style="font-size:16px;">
<span class="dropt" title="">TITLE 1<span style="width:750px;">
MESSAGE TEXT GOES HERE</span></span>
</td>

<td width="150" style="font-size:16px;">
<span class="dropt" title="">TITLE 2<span style="width:750px;">
MESSAGE TEXT GOES HERE</span></span>
</td>

coothead · June 23, 2019, 8:18pm

Hi there javascript7,

as I could see no indication of tabular data in your code
snippet, I was rather reluctant to supply you with a code
example.

But my benevolent nature got the better of me…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

.dropt {
    position:relative;
 }

.dropt > table {
    margin: auto;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-color: #fff;
 }

.dropt > table td {
    padding:0.5em;
    border: 1px solid #999;
    border-radius: 0.5em;
    box-shadow: inset 0 0 0.5em rgba( 0, 0, 0, 0.3 );
    background-color: #fff;
    transition: 0.25s ease-in-out;

 }

.dropt > table > tbody > tr > td  {
    background: #ff0;
    cursor: pointer;
  }

.dropt > table > tbody > tr > td:hover {
    background: #fff; 
 }

.dropt > table > tbody > tr > td  span { 
    position: absolute;
    z-index: 2;
    left: -999em;
    width: 96%; 
    max-width: 68.75em;
    padding: 0.5em;; 
    margin-top: 2.3em;
    border: 1px solid  #666;
    border-radius: 0.5em;
    background: #fff; 
    box-shadow: 0.3em 0.4em 0.3em rgba( 0, 0, 0, 0.3 );
    transition: background 0.75s ease-in-out;
 }

.dropt > table > tbody > tr > td:hover  span,
.dropt > table > tbody > tr > td:active span {
    left: 50%;
    transform: translate( -50%, 0 );
    background: #c4d7dd; 
 }
</style>

</head>
<body>
 
 <div class="dropt">
  <table>
   <tbody>
    <tr>
     <td>
      ALERT 1
       <span>My 1st message goes here</span>    
     </td>
     <td>
      ALERT 2
       <span>My 2nd message goes here</span>
     </td>
    </tr>
    <tr>
     <td>
      ALERT 3
       <span>My 3rdmessage goes here</span>
     </td>
     <td>
      ALERT 4
       <span>My 4th message goes here</span>
     </td>
    </tr>
    <tr>
     <td>
      ALERT 5
       <span>My 5th message goes here</span>
     </td>
     <td>
      ALERT 6
       <span>My 6th message goes here</span>
     </td>
    </tr>
    <tr>
     <td>
      ALERT 7
       <span>My 7th message goes here</span>
     </td>
     <td>
      ALERT 8
       <span>My 8th message goes here</span>
     </td>
    </tr>
   </tbody>
  </table>
 </div>

</body>
</html>

As semantic coding seems to have no relevance,
whatsoever, to a large swathe of today’s web page
makers, I will just have to keep on smiling benignly.

coothead

javascript7 · June 23, 2019, 10:27pm

I thought by providing the TD tags was enough. I apologize if it wasn’t. It is a lengthy table with many conditional statements and record set inserts and didn’t realize that you needed it all. I will check it out. Thank you for your time, I appreciate it.

javascript7 · June 24, 2019, 7:28am

Nicely done, thank you!

coothead · June 24, 2019, 11:11am

No problem, you’re very welcome.

coothead

SamA74 · June 24, 2019, 5:11pm

Putting a dog in a stable does not make it a horse.

javascript7 · June 24, 2019, 6:10pm

Must be nice to have the time to sit behind a keyboard and take shots at someone. Wish I had an opportunity to see what you don’t know about my profession. Just trying to learn and I don’t think it’s best to use this forum to make the unnecessary comments as you do. Good to know that you know it all.

ronpat · June 25, 2019, 7:03pm

@javascript7,

<td> is a tag, a structural element, it is not “data”. We can’t tell if you are framing your page with a table or properly (semantically) enclosing data within a table since we cannot see the relevent surrounding code nor the actual contents (the “data”).

If you have not done so, please read our posting guidelines for suggestions about posting code and describing problems:

If that doesn’t clarify our needs, then try reading this post that I sent to another member about the same issue:

Finally, allow me to mitigate my stern position, slightly.

When posting in programming categories such as JS and PHP, etc, (not HTML and CSS) one can apparently get by without posting a full working HTML and CSS page (although more info is usually requested by the helper-bee) and most of your posts have been in the programming categories. My area of expertise is HTML and CSS, I do not speak JS or any other programming language so I cannot address the needs of those categories.

To troubleshoot HTML and CSS code, we almost always need to see the structure of the page and relevent code. What is relevent code: the structure refers to the overall framing of the page incuding the doctype and head sections with full URLs to needed resources. It necessarily includes the code of the troublesome area, HTML and CSS code - no raw SCSS, or PHP - JS is interpreted by browsers so it can be included if part of the issue. If you have done a thorough job of narrowing down the cause of the problem, then you will have eliminated some unused CSS and most of the uninvolved HTML from the working page. The code - “working page” - should be validated before posting.

If you are posting here because the above seems like too much work, then you are posting for the wrong reason. We may have to do go through the same routines although it usually takes us less time because of our experience of having done it so many times.

Help us help you. Be clear and complete. Don’t expect us to make the same assumptions that you might make about code.

Very true and a very appropo analogy - certainly smile-worthy.

Cheers

system · September 25, 2019, 2:03am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.