creating a facebook-like textarea with bubble tip

infinitizon · Nov 16, 2011

Hi guys,

Does anyone have any ideas as to how I can create a textarea or input textbox with a bubble tip like the one on facebook wall post

The textarea has a pointer like tip.

Any ideas

____________________
Men put up a strong face just to cover their weaknesses...good!
But a smile makes them live longer....
Which would you choose?

Think about it.

vacunita · Nov 16, 2011

If you mean the little tool tip that says "What's on Your Mind" that appears when you hover over the textbox, simply give your input a title with whatever you want it to say.

Code:

<input type="text" title="Tool Tip text here">

If that's not it, could perhaps be a bit more specific of what you are talking about?

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

infinitizon · Nov 16, 2011

Thanks for the reply but not that.

If you look at the textarea very well, you'd see a small arrow pointing to the "update status" text, kind of telling you that the textbox belongs to the "update status" text. If you click on the "Add photo/video" the arrow points to the text indicating you are now on the "Add photo/video" text. do you get the idea.

I would have thought it is a bubble tooltip but it does not look loke a tooltip...because it is a textarea

vacunita · Nov 16, 2011

Ahh yes, I see now.

Looking at the code the tiny arrow is an image, a gif to be precise, placed in the correct position. Some judiciously applied CSS can accomplish that.

And a simple JS function to modify its position according to what option was clicked.

Code:

<!DOCTYPE HTML>
<html>
<head><title>Tool tp Arrow</title>
<style type="text/css">
#options{
margin-bottom:0px;
padding-bottom:0px;
}

#options ul{
list-style-type:none;
overflow:hidden;
padding:0px;
}

#options ul li{
float:left;
text-align:center;
min-width:80px;
font-family:Verdana;
cursor:pointer;
padding:0px;
}

#outer{
position:relative;
background:transparent;
padding-top:0px;
margin-top:0px;
border:1px solid #ffffff;
min-height:27px;
}

#outer span#arrow{
display:block;
position:absolute;
left:25px;
top:0px;
margin-top:-4px;
margin:0px;
padding:0px;
height:6px;
background-image:url('arrow.gif');
background-repeat:no-repeat;
background-position:top left;
z-index:10;
width:10px;
background-color:#ffffff;

}

#outer div.brdr{
border:1px solid #dedede;
margin-top:4px;
}

#outer div.brdr input.mytext{
border:none;
}
</style>
<script type="text/javascript">
function moveArrow(arrowPos){
var arrowObj=document.getElementById('arrow');
 if(arrowPos=='base'){
   arrowObj.style.left="25px";   
 }
 if(arrowPos=='pos2'){
   arrowObj.style.left="105px";   
 }
 if(arrowPos=='pos3'){
   arrowObj.style.left="195px";   
 }
}
</script>
</head>
<body>
<div id="options"><ul><li onclick="moveArrow('base');">Option 1</li><li onclick="moveArrow('pos2');">Option 2</li><li onclick="moveArrow('pos3');">Option 3</li></ul></div>
<div id="outer">
<span id="arrow"></span>
<div class="brdr"><input type="text" class="mytext"><div>
<div>

</body>
</html>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

infinitizon · Nov 17, 2011

Thanks,
I'd try that

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

creating a facebook-like textarea with bubble tip

infinitizon

MIS

vacunita

Programmer

infinitizon

MIS

vacunita

Programmer

infinitizon

MIS

Similar threads

Part and Inventory Search

Sponsor