By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,384 Members | 1,794 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,384 IT Pros & Developers. It's quick & easy.

format a text string???

P: n/a
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;heig ht: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

Sep 28 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
charlie_M wrote:
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.displa y='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;heig ht: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.displa y = '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="">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>


TIA
Chuck

--
Rob
Sep 28 '05 #2

P: n/a
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
*** Sent via Developersdex http://www.developersdex.com ***
Sep 28 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.