format a text string???

charlie_M · Sep 28, 2005

I have the following code:

<script type=text/javascript>
function hide_tooltip(){
var hp = document.getElementById("tooltipper");
hp.style.left=0;
hp.style.top=0;
hp.style.width=1;
hp.style.height=1;
hp.style.padding=0;
hp.style.border=0;
hp.innerHTML="";
}
function show_tooltip(event,wid,ht,txt){
var vp=document.getElementById("tooltipper");
vp.style.border="1px solid black";
vp.style.left=event.clientX+25;
vp.style.top=event.clientY-1;
vp.style.width = wid;
vp.style.height = ht;
vp.style.padding=10;
vp.innerHTML=txt;

}

</script>

</head>

<body>
<BR><BR>
<form>

<a href=# onmouseover="javascript:show_tooltip(event,400,10,'This is an
input text box that you need to fill in.');"
onmouseout="javascript:hide_tooltip();" style='color:red'><input
type=text name='bob'></a>
</form>
<div id='tooltipper'
style='position:absolute;left:0;top:0;width:1;height:1;border:0;background-color:rgb(250,250,255)'></div>
</body></html>
=====================================
Question:... Is there any way to insert a NewLine in the text string to
control the formatting of the text in the window??

TIA
Chuck

RobG · Sep 28, 2005

charlie_M said:
I have the following code:

<script type=text/javascript>

Putting attribute values inside quotes is not always required, but it's
a good idea to do so.

function hide_tooltip(){
var hp = document.getElementById("tooltipper");
hp.style.left=0;
hp.style.top=0;
hp.style.width=1;
hp.style.height=1;
hp.style.padding=0;
hp.style.border=0;
hp.innerHTML="";

Why go to all that bother, why not just set the element's display
attribute to 'none'?

function hide_tooltip()
{
document.getElementById("tooltipper").style.display='none';
}

}
function show_tooltip(event,wid,ht,txt){
var vp=document.getElementById("tooltipper");
vp.style.border="1px solid black";
vp.style.left=event.clientX+25;
vp.style.top=event.clientY-1;

clientX and clientY don't work on all browsers, read here:

<URL:http://www.quirksmode.org/js/events_properties.html>

Search for 'Mouse position'. It starts with:

"As to the mouse position, the situation is horrible. Although
there are no less than six mouse coordinates property pairs,
there is no reliable cross–browser way to find the mouse
coordinates relative to the document we need."

Despite that, a pretty good solution is offered.

vp.style.width = wid;
vp.style.height = ht;
vp.style.padding=10;
vp.innerHTML=txt;

Why not do all the style stuff using CSS? And if you use the above
link's suggestion and create a 'cursorPos' function, then your function
can be:

function show_tooltip(event, txt)
{
var vp=document.getElementById("tooltipper");
vp.style.left = cursorPos(event, 'x') + 'px';
vp.style.top = (cursorPos(event, 'x') - 1) + 'px';

// Supply a unit and specify all four sides
vp.style.padding = '5px 10px 5px 10px';

vp.innerHTML=txt;

If you specify say the width, the text will be wrapped to fit anyway, so
no need to put your own br in there.

If you are going to break the text yourself, set a width but not height
so the tip extends below the text. And use 'em' for units so it expands
with the text size too.

}

</script>

</head>

<body>
<BR><BR>
<form>

<a href=# onmouseover="javascript:show_tooltip(event,400,10,'This is an

There is no need for the javascript pseudo protocol, intrinsic events
will use JavaScript by default (except in some browsers in rare
circumstances - say IE where you have previously used VBscript).

And your function should return false to prevent the '#' being followed
and the browser scrolling to the top of the page.

But anyway, this seems to be for an input element, so why not put the
mouseover event on that and remove the misleading A element?

input text box that you need to fill in.');"

input text box that you need to fill in.');return false;"

onmouseout="javascript:hide_tooltip();" style='color:red'><input

Again, ditch the 'javascript:' bit.

type=text name='bob'></a>
</form>
<div id='tooltipper'
style='position:absolute;left:0;top:0;width:1;height:1;border:0;background-color:rgb(250,250,255)'></div>
</body></html>
=====================================
Question:... Is there any way to insert a NewLine in the text string to
control the formatting of the text in the window??

Yes, insert a <br> element in your string parameter when you call the
function. There are hundreds of scripts out there that do this, search
this newsgroup and you'll find a dozen in the last couple of weeks.

<html>
<head>
<title>tip play</title>

<script type="text/javascript">

function hide_tooltip()
{
document.getElementById("tooltipper").style.display = 'none';
}

function show_tooltip(event, txt)
{
var vp=document.getElementById("tooltipper");
vp.style.display = '';
vp.style.left = (cursorPos(event, 'x')+25) + 'px';
vp.style.top = (cursorPos(event, 'y')-1) + 'px';
vp.innerHTML = txt;
}

function cursorPos(e, a)
{
if (e.pageX || e.pageY){
return ('x'==a)? e.pageX : e.pageY;
} else if (e.clientX || e.clientY) {
return ('x'==a)? e.clientX + document.body.scrollLeft :
e.clientY + document.body.scrollTop;
}
}

</script>

<style type="text/css">
#tooltipper {
position: absolute;
border: 1px solid black;
padding: 5px 10px 5px 10px;
background-color:rgb(250,250,255);
width: 8em;
}
</style>
</HEAD>
<BODY>

<form action="">

     <input type="text" name="bob" onmouseover="
show_tooltip(event, 'This is an input text box that'
+ '<br>you need to fill in.');
" onmouseout="hide_tooltip();">
</form>

<div id='tooltipper' style="display: none;"></div>

</body></html>

charles maier · Sep 28, 2005

Thanks Rob for the long reply. I think I posted to the wrong group
though.... sorry my fault.

BTW.. the <br> works on your example but not on "my code". I did try it
and nothing seemed to cause the newline that I could find as written.

One thing for certain.... there is always some other way to make the
code work by completely rewriting it another way. Maybe I should stick
to Foxpro ;o)))

Thanks
Chuck

JavaScript: how to keep track of the circle in canvas on specific path?	0	Mar 20, 2023
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Can someone help me correct this code? It should be a two line countdown timer.	3	Jan 26, 2023
Reversing output of user input by using while loop...	2	Sep 1, 2022
Help with code	0	Jun 12, 2022
Show text on-click with transition	2	Feb 14, 2022
Help with my responsive home page	2	Dec 14, 2022
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022

format a text string???

charlie_M

RobG

charles maier

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads