how to convert inline CSS into external JS file

**richardleverton** · 05-27-2010, 08:06 PM

Sorry, but this is probably a really dumb question from a CSS noob.

I found a really neat piece of CSS code which does what I want. Unfortunately, it has all the code 'inline' and if I want to do the same thing on multiple .HTML pages within a website, I'd have to duplicate all the code over and over. I know that I can cut it and paste it into a .js file and then just put a SCRIPT line in the HEAD and use the 'activate' lines in the BODY of my various pages, but when I try, it doesn't work anymore.

I suspect that I'm messing up how much I am including in the .js, and the SCRIPT statements I put into the .HTM files.

can somebody help, please

below is the 'inline' code that works very nicely - the part I'd like to put into a .js file is in magenta

---------------

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Bubble Tooltips test_01 Page_01</title>


<!---------------------------------------------------------------------------------------->
<style type="text/css">

body{font: .75em Arial,sans-serif; background: #FFFFFF; color: #333333}
div#container{width: 500px; margin:0 auto}
h1{ color: #F60; margin: 1em 0 0; letter-spacing: -2px; }
p{margin: 0 0 1.7em; }

/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
	font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
	padding: 15px 0 0 0;
	width:200px;
	color: #993300;
    text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url("Bubble_Tooltip_Files/bubble.gif") no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url("Bubble_Tooltip_Files/bubble_filler.gif") repeat bottom; 
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url("Bubble_Tooltip_Files/bubble.gif") no-repeat bottom;
}
</style><!---------------------------------------------------------------------------------------->

</head>

<body>
	
		<h1>CSS Bubble Tooltips</h1>
		<p>Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too.  You can <a href="#" class="tt">hover over me<span class="tooltip"><span class="top"></span><span class="middle">This is my Bubble Tooltip with CSS</span><span class="bottom"></span></span></a> to see how well these bubble tooltips work.  Besides that if you have an advanced site in the first place you probably have enought javascript already.</p>
		<p>This example will show you how well this tooltip stretches for long descriptions when you <a href="#" class="tt">hover here!<span class="tooltip"><span class="top"></span><span class="middle">WWOOWW!, <br />This really is a very long tooltip.  Normally they aren't this long but every once in a while you feel the urge to use a really long description to make sure you get your point across to everyone!  This could go on and on all of the way down the page and probably overflow onto the next website you visit!  No, seriously go check the next website you planned on visiting..but you have to be quick when you move the mouse off of this link.  I bet you can't do it fast enough ;)</span><span class="bottom"></span></span></a>.  Also with the IE hack for the :hover state, you can do this with elements besides anchors.</p>
		<p>If you dont like how it allows you to hover over the tooltip also then you can adjust the padding and top to separate the tool tip from the link.</p>
		<p><a href="http://trentrichardson.com/downloads/?dl=csstooltips.zip">Download Source</a>
	
</body>
</html>

here's what I have put into my revised HTM after cutting out all the STYLE lines

Code:

<html>

<head>
<title>Bubble Tooltips test_01 page_03</title>


<!---------------------------------------------------------------------------------------->

<!script language="javascript1.2" src="Bubble_Tooltip_Files/Bubble_Tooltip.js" type=text/javascript"></script>
<!script type="text/css" src=""Bubble_Tooltip_Files/Bubble_Tooltip.js"></script>
<script type="text/javascript" src=""Bubble_Tooltip_Files/Bubble_Tooltip.js"></script>
</head>

<body>
	
	<!div id="tiplayer" style="visibility:hidden:position:absolute:z-index:1000:top:-100:"></div>
	<!script language="javascript1.2" src="Bubble_Tooltip_Files/Bubble_Tooltip.js" type=text/javascript"></script>
	
	
		<h1>CSS Bubble Tooltips - my tests - split css out into JS file</h1>
		
		<p>&nbsp;</p>
		<p>ONE -&nbsp;&nbsp; <a href="#" class="tt">hover_text_1<span class="tooltip"><span class="top"></span><span class="middle">tooltip_text_1</span><span class="bottom"></span></span></a>&nbsp;&nbsp; 
		end of one</p>
		
		<p>TW0 - <a href="#" class="tt">hover_text_2<span class="tooltip"><span class="top"></span><span class="middle">start of tooltip_text_2    WWOOWW!, <br />This really is a very long tooltip.  Normally they aren't this long but every once in a while you feel the urge to use a really long description to make sure you get your point across to everyone!  This could go on and on all of the way down the page and probably overflow onto the next website you visit!  No, seriously go check the next website you planned on visiting..but you have to be quick when you move the mouse off of this link.  I bet you can't do it fast enough ;)  end of tooltip_2 </span><span class="bottom"></span></span></a>. 
		end of two</p>
		
		<p>THREE - one of my own , a bunch of x's starting here ...&nbsp;&nbsp; 
		<a href="#" class="tt">hover_text_3<span class="tooltip"><span class="top"></span><span class="middle">tooltip_text_3</span><span class="bottom"></span></span></a>
		and this is the end of the text around</p>
		<p>&nbsp;
	
</body>
</html>

as you can see, I have been trying various versions of statements referring to the .js file ( in green )

**azoomer** · 05-27-2010, 08:20 PM

What you have in the section with pink color is CSS and not javascript. You need to save it in a new file called: Bubble_Tooltip.css ( and not .js)

Then you can link to it like this

<link rel="stylesheet" type="text/css" href="/Bubble_Tooltip_Files/Bubble_Tooltip.css" />

Just ensure that the path (/Bubble_Tooltip_Files/Bubble_Tooltip.css) is working.

Try it out. If you have problems getting it going then post a link to you page so we can see it.

**molendijk** · 05-27-2010, 08:22 PM

You have to put the styles in a file having the extension .css (!!!). Put all the code in it without the style tags. Then on each page:
<link rel="stylesheet" type="text/css" href="Bubble_Tooltip_Files/Bubble_Tooltip.css">
===
Arie Molendijk.

**richardleverton** · 05-27-2010, 09:46 PM

thanks very much azoomer and arnie , your suggestions were perfect

I had to fiddle a little with the urls for the graphics that make up the box around the popup, but i got it.

it's no nice that pros like you guys will take the time to answer such a dumb

question, I know that many of us newbies would be dead without all the help from the community

thanks again and best regards

Thread: how to convert inline CSS into external JS file

Thread Tools

Search Thread

how to convert inline CSS into external JS file

thanks, that did it

Bookmarks

Bookmarks

Posting Permissions