How to return to online for a span

**ASHER** · 04-03-2010

I would like to know how to return to online for a span. Here is my part of the code:

HTML Code:

$ mp3 = '<span title = "'$. filesize_mp3.'<br> RS "> <a href="#"> <img src="mp3.gif" align="absmiddle" class="Img01" /> </ a> </ span>';

I doubt with with my span tag, I mean shouldn't I need to close the tag <span title .. > <br> ...

Is there anyone who can help me or explain me about the same?

**CitricAcid** · 04-03-2010

The <span> is unnecessary. If you just want to put a title attribute, you can do on any item here on <a>.

We can not put in an attribute tag, title or another. We can not save for end of line in a bubble title. If you really want, you'll have to go DIY and make JavaScript for bubbles whose content is in HTML.

**ASHER** · 04-03-2010

I tried like that, but without result:

HTML Code:

$ mp3 = '<script language="JavaScript"> document.write ( "span title ="'$. filesize_mp3.'\ nLine2 ">)</ script> ';
$ mp3 .= <a href="#"> <img src = " '$. path2icons.'mp3_yes.gif "align =" absmiddle "class =" img01 "/> </ a> </ span>';

**CitricAcid** · 04-03-2010

When I talked about tinkering in JavaScript, I meant "we can not do that with normal tooltip with title, so instead we'll schedule tooltips that accept html, JavaScript. I know it is, but I can not give you a starting point. Basically you have no need of this new line.

**CodGuru** · 04-03-2010

It would be nice to have a bit more html code. I'll assume the following:

HTML Code:

<div class ="file">
  <img id ="logo" src ="logoFile.jpg" alt ="">
  <span id ="bubble">
     size: 2MB <br />
     Duration: 02:05<br />
     etc: info
  </ span>
</ div>

at the CSS, we'll put the info bubble just below the image, and hide it.

HTML Code:

.file {
   position: relative;
}
 
.file span {
   position: absolute;
   display: none;
   /** has to change depending on how you want **/
   width: 200px;
   top: 80px;
   left: 40px;
   padding: 5px;
   background: #eeffce;
   /*****/
}

with javascript you will see on the screen the info bubble when it passes over the image

HTML Code:

var img = window.document.getElementById('logo');
 var span = window.document.getElementById('bubble');
 
 img.onmouseover = function(){
	span.style.display = "block";
 }
 
 img.onmouseout = function(){
	span.style.display = "none";
 }

**ASHER** · 04-03-2010

I used like that, but it not even displays the tooltip

HTML Code:

<head>
<style>
.file {
   position: relative;
}
 
.file span {
   position: absolute;
   display: none;
   /** has to change depending on how you want **/
   width: 200px;
   top: 80px;
   left: 40px;
   padding: 5px;
   background: #eeffce;
   /*****/
}
</style>
<script language="JavaScript">
var img = window.document.getElementById('logo');
 var span = window.document.getElementById('bubble');
 
 img.onmouseover = function(){
	span.style.display = "block";
 }
 
 img.onmouseout = function(){
	span.style.display = "none";
 }
</script>
</head>
<body>
 
<div class="file">
  <img  id="logo" src="1.png" alt="">
  <span id="bubble">
     size : 2MB<br />
     duration : 02:05<br />
     etc : info
  </span>
</div>