HTML Tooltip Help Needed

[sullivanonline]

HTML Tooltip question ... anyone out here able to assist?

I know what I need to do has to be pretty simple, but I am not a programmer. I'm an instructional designer trying to fix a problem in an online course that goes live in a couple days.

Basically all I need to do is reposition where the tooltip pop-up sits on the screen. It's anchored to a position. And I have tested altering some of the number in code, but I can't get it move where I need it and function properly.

For instance ... When I alter the .tooltip:hover span code to like a -325 on the margin setting, then it gets the pop-up placement where I need it (in my editing mode) ... but then when I publish the course live online, it acts like it's not there and it disappears.

Got a fix for this anyone?

Here's the code I inherited:


<style type="text/css">.tooltip {border-bottom: 1px dotted #475073;
outline: none;
cursor: help;
text-decoration: none;
position: relative;
}text-decoration: none;
color: #666;
text-shadow: 0px 1px 0px rgba(255,255,255,.5); /* 50% white from bottom */
} .tooltip:hover span {
border-radius: 2px 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 2px 2px rgba(0, 0, 0, 0.1); .tooltip span {
margin-left: -999em;
position: absolute;
font-size: 12px;
font-weight: normal; position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 580px;
} .tooltip:hover img {
border: 0;
margin: -3x 0 0 -55px;
float: left;
position: absolute;
vertical-align: middle;
}
font-size: 14px;
font-weight: bold;
display: block;
padding: 3px 3px 6px 0px;
}

html a:hover {
background: transparent;
}

.help {
background: #eeeeee; /* Old browsers */
.tooltip:hover strong {/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxp bmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0 PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkM2QzZDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFy R3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #eeeeee 0%, #d3d3d3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#d3d3d3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#d3d3d3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#d3d3d3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#d3d3d3 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#d3d3d3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-8 */
border: 1px solid #999;
padding: 0.5em 0.8em 0.8em 2em;
} </style>

[Deadweight]

Post the URL please?

[sullivanonline]

Post the URL please?

I wish I could ... but it's in a password protected university course. So there isn't an open URL. It's inside of the ANGEL LMS platform (owned by Blackboard).
Is there something more I can copy/paste out that would give you what you need?
Thanks for trying to help.

[Deadweight]

use jsfiddle.net

[molendijk]

There are errors in your code, so we can't expect it to function properly. See below:


<style type="text/css">
.tooltip {border-bottom: 1px dotted #475073;
outline: none;
cursor: help;
text-decoration: none;
position: relative;
}

text-decoration: none; //WHERE'S THE ID OR CLASS PLUS OPENING '{'?
color: #666;
text-shadow: 0px 1px 0px rgba(255,255,255,.5); /* 50% white from bottom */
}

.tooltip:hover span {
border-radius: 2px 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 2px 2px rgba(0, 0, 0, 0.1); //WHERE'S THE CLOSING '}'?

.tooltip span {
margin-left: -999em;
position: absolute;
font-size: 12px;
font-weight: normal; position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 580px;
}

.tooltip:hover img {
border: 0;
margin: -3x 0 0 -55px;
float: left;
position: absolute;
vertical-align: middle;
}

font-size: 14px; //WHERE'S THE ID OR CLASS PLUS OPENING '{'?
font-weight: bold;
display: block;
padding: 3px 3px 6px 0px;
}

html a:hover {
background: transparent;
}

.help {
background: #eeeeee; /* Old browsers */ //WHERE'S THE CLOSING '}'?

.tooltip:hover strong
{/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxp bmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0 PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkM2QzZDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFy R3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #eeeeee 0%, #d3d3d3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#d3d3d3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#d3d3d3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#d3d3d3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#d3d3d3 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#d3d3d3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-8 */
border: 1px solid #999;
padding: 0.5em 0.8em 0.8em 2em;
}

</style>

[JoePoe]

You didn't close

-moz-box-shadow: 2px 2px rgba(0, 0, 0, 0.1);
Do you use Notepad++ ? If not try to use it, it helps a lot

@edit:
@up
I didn't see, sorry...