CSS Tool Tips

I'm hoping someone can point me in the right direction here.
I have almost finished a site where on one page I have
inserted some code from a tooltip I found on the net to create a
rollover explanation of certain text.
The problem is that now I have entered the code in between
the <head></head> codes, it has lowered my banner, logo
and buttons by a good inch, and I cannot reposition them back to
where they were. This wouldn't look
so bad if all the pages were positioned like this, but when
browing through the pages, this one page just drops and inch and
looks unprofessional.
Is there anyway of stopping this code from altering the shape
and layout of the page. I'm very new to css, so am struggling with
certain aspects.
Any help would be greatly appreciated.

Please post a link to the page. What you're describing makes
no sense to me
but without seeing the code it's impossible to diagnose
accurately.
Walt
"BleachedEgo" <[email protected]> wrote in
message
news:gbvvrc$gjf$[email protected]..
> I'm hoping someone can point me in the right direction
here.
>
> I have almost finished a site where on one page I have
inserted some code
> from
> a tooltip I found on the net to create a rollover
explanation of certain
> text.
>
> The problem is that now I have entered the code in
between the
> <head></head>
> codes, it has lowered my banner, logo and buttons by a
good inch, and I
> cannot
> reposition them back to where they were. This wouldn't
look
so bad
> if
> all the pages were positioned like this, but when
browing through the
> pages,
> this one page just drops and inch and looks
unprofessional.
>
> Is there anyway of stopping this code from altering the
shape and layout
> of
> the page. I'm very new to css, so am struggling with
certain aspects.
>
> Any help would be greatly appreciated.
>

Similar Messages

Help with creating One Time informative Pop-up (Like a tool-tip) with CSS

Hey guys,
My website has a nav bar on top that often times is missed by users unless I personally point it out. What I would like to do is have a litle tool tip like pop-up come on screen the first time someone visits the page, pointing to the navbar with some basic info. I have not worked with cookies or tooltips in the past, so I am at a loss on how to approach this. (I am not even sure the appropriate name for what I am looking for, so I am struggling to Google it!) If someone could point me to a tutorial or give me some tips, I would be much obliged!
The website in question with the navbar is www.clccedarrapids.com and it was designed in DWcs6 with the Bootstrap css kit.

Thanks Nancy (and everyone else),
I struggle because the navbar seems natural and unobtrusive to me, and I really like that! I struggle a lot with design, and it always takes me a long time to settle on something I like, then this happens. C'est la vie! Can you guys suggest, off the top of your head, any options that might work better? I am not sure I like the big bulky bar at the top as ken suggested (but that could just be me) and I also want to consider how it will look on mobile, as I am very pleased with the mobile side of things now.
Also, is there any reason that I need to reduce my CSS code? I am not using most of bootstrap and would be happy to knock some things out if I need to. I am using GoDaddy as my host, so I am not worried about server load, will it effect end user performance?

Spry tool tip does not work in template or child pages within an editable region. Why not?

Ok. so I am getting pretty frustrated. I take the time to learn how to use CSS and to create a template page for a Contractor Site (www.ContractorInsurance.net). The idea is to create a page that I can use for different classes of Contractors...right?
Then I get all happy about being able to insert ToolTip onto pages to help the user. Great!
LIfe to turn to Sorrow after nearly five hours of searching for a "eeking" answer.
So what good does it do to have an Editable region to update if we cannot have the flexibility to insert a tool tip on child pages? Ok so the fast solution is to what... Have a question mark image, insert another apDiv, name it toolTip_Not and provide it with a show=hide behavior?
RRRRRrrr...
This really sucks not being able to find a solution within a reasonable amount of time.

I have tried thank you. However...it is still not working.
www.ContractorInsurance.net/course_of_construction.php
The error message is "Making this change would require code that is locked by a template translator"
Re: Spry tool tip does not work in template or child pages within an editable region. Why not?
created by altruistic gramps in Spry Framework for Ajax - View the full discussion
If you have a look at the following simple document with a tooltipTooltip trigger goes here.
Tooltip content goes here.
you will notice that a couple of lines have been placed in the HEAD section of the document. When using DW templates, the HEAD section is usually not editable, hence the error mesaage. By default, your template should have an editable region in it just before the closing tag. It looks like this:  Dreamweaver should be able to find that editable region and insert the
<script> tag there automatically. Because you don't have an editable region like that in the <head>, open the master template, and paste the code above just before the closing </head>
tag. Gramps
Edited to remove personal data

Tool tip to not move

Hi I'm a big fan. long time lurker first time poster
Currently the position of the tool tip depends on where the cursor first hovers over the image. Is there a way for the tool tip to appear in the same place no mater where the image is hovered?
below is the js and css
thanks
// SpryTooltip.js - version 0.9 - Spry 1.6.1
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
if(parseFloat(r[2]) < 420)
this.version = 2;
else
this.version = 3;
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.Widget.BrowserSniff();
Spry.Widget.Tooltip = function(tooltip_element, trigger_selector, options)
options = Spry.Widget.Utils.firstValid(options, {});
this.init(trigger_selector, tooltip_element, options);
if (Spry.Widget.Tooltip.onloadDidFire)
this.attachBehaviors();
Spry.Widget.Tooltip.loadQueue.push(this);
Spry.Widget.Tooltip.prototype.init = function(trigger_element, tooltip_element, options)
var Utils = Spry.Widget.Utils;
this.triggerElements = Utils.getElementsByClassName(trigger_element);
this.tooltipElement = Utils.getElement(tooltip_element);
options.showDelay = parseInt(Utils.firstValid(options.showDelay, 0), 10);
options.hideDelay = parseInt(Utils.firstValid(options.hideDelay, 0), 10);
if (typeof this.triggerElements == 'undefined' || !(this.triggerElements.length > 0))
this.showError('The element(s) "' + trigger_element + '" do not exist in the page');
return false;
if (typeof this.tooltipElement == 'undefined' || !this.tooltipElement)
this.showError('The element "' + tooltip_element + '" do not exists in the page');
return false;
this.listenersAttached = false;
this.hoverClass = "";
this.followMouse = false;
this.offsetX = 15;
this.offsetY = 15;
this.closeOnTooltipLeave = false;
this.useEffect = false;
Utils.setOptions(this, options);
this.animator = null;
for (var i =0; i < this.triggerElements.length; i++)
if (!this.triggerElements[i].className)
this.triggerElements[i].className = '';
if (this.useEffect){
switch (this.useEffect.toString().toLowerCase()){
case 'blind': this.useEffect = 'Blind'; break;
case 'fade': this.useEffect = 'Fade'; break;
default:
this.useEffect = false;
this.visibleTooltip = false;
// Hack for FF 3 - Safari 3: force painting of the element, in order to have the correct display
this.tooltipElement.offsetHeight;
// Optimisation: save browser work if display is already 'none'
if (Spry.Widget.Utils.getStyleProperty(this.tooltipElement, 'display') != 'none')
this.tooltipElement.style.display = 'none';
if (typeof this.offsetX != 'numeric')
this.offsetX = parseInt(this.offsetX, 10);
if (isNaN(this.offsetX))
this.offsetX = 0;
if (typeof this.offsetY != 'numeric')
this.offsetY = parseInt(this.offsetY, 10);
if (isNaN(this.offsetY))
this.offsetY = 0;
this.tooltipElement.style.position = 'absolute';
this.tooltipElement.style.top = '0px';
this.tooltipElement.style.left = '0px';
Spry.Widget.Tooltip.onloadDidFire = false;
Spry.Widget.Tooltip.loadQueue = [];
Spry.Widget.Tooltip.addLoadListener = function(handler)
if (typeof window.addEventListener != 'undefined')
window.addEventListener('load', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('load', handler, false);
else if (typeof window.attachEvent != 'undefined')
window.attachEvent('onload', handler);
Spry.Widget.Tooltip.processLoadQueue = function(handler)
Spry.Widget.Tooltip.onloadDidFire = true;
var q = Spry.Widget.Tooltip.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen; i++)
if (!q[i].listenersAttached)
q[i].attachBehaviors();
Spry.Widget.Tooltip.addLoadListener(Spry.Widget.Tooltip.processLoadQueue);
Spry.Widget.Tooltip.prototype.addClassName = function(ele, className)
if (!ele || !className)
return;
if (ele.className.indexOf(className) == -1)
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.Tooltip.prototype.removeClassName = function(ele, className)
if (!ele || !className )
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.Tooltip.prototype.showTooltip = function()
if (!this.visibleTooltip)
this.tooltipElement.style.visibility = 'hidden';
this.tooltipElement.style.zIndex = '9999';
this.tooltipElement.style.display = 'block';
Spry.Widget.Utils.putElementAt(this.tooltipElement, this.pos, {x:this.offsetX, y:this.offsetY}, true);
if(Spry.is.ie && Spry.is.version == '6')
this.createIframeLayer(this.tooltipElement);
if (!this.visibleTooltip)
if (this.useEffect)
if (typeof this.showEffect == 'undefined')
this.showEffect = new Spry.Widget.Tooltip[this.useEffect](this.tooltipElement, {from: 0, to: 1});
this.showEffect.start();
else
this.tooltipElement.style.visibility = 'visible';
this.visibleTooltip = true;
Spry.Widget.Tooltip.prototype.hideTooltip = function(quick)
if (this.useEffect && !quick)
if (typeof this.hideEffect == 'undefined')
this.hideEffect = new Spry.Widget.Tooltip[this.useEffect](this.tooltipElement, {from: 1, to: 0});
this.hideEffect.start();
else
if (typeof this.showEffect != 'undefined')
this.showEffect.stop();
this.tooltipElement.style.display = 'none';
if(Spry.is.ie && Spry.is.version == '6')
this.removeIframeLayer(this.tooltipElement);
if (this.hoverClass && !this.hideTimer)
for (var i = 0; i < this.triggerElements.length; i++)
this.removeClassName(this.triggerElements[i], this.hoverClass);
this.visibleTooltip = false;
Spry.Widget.Tooltip.prototype.displayTooltip = function(show) {
if (this.tooltipElement)
if (this.hoverClass){
for (var i = 0; i < this.triggerElements.length; i++)
this.removeClassName(this.triggerElements[i], this.hoverClass);
if (show)
if (this.hideTimer)
clearInterval(this.hideTimer);
delete(this.hideTimer);
if (this.hoverClass)
if (typeof this.triggerHighlight != 'undefined')
this.addClassName(this.triggerHighlight, this.hoverClass);
var self = this;
this.showTimer = setTimeout(function(){self.showTooltip()}, this.showDelay);
else
if (this.showTimer)
clearInterval(this.showTimer);
delete(this.showTimer);
var self = this;
this.hideTimer = setTimeout(function(){self.hideTooltip();}, this.hideDelay);
this.refreshTimeout();
Spry.Widget.Tooltip.prototype.onMouseOverTrigger = function(e)
var target = '';
if (Spry.is.ie)
target = e.srcElement;
else
target = e.target;
var contains = Spry.Widget.Utils.contains;
for (var i = 0; i < this.triggerElements.length; i++)
if (contains(this.triggerElements[i], target))
target = this.triggerElements[i];
break;
if (i == this.triggerElements.length) return;
if (this.visibleTooltip && this.triggerHighlight && this.triggerHighlight == target)
if (this.hideTimer)
clearInterval(this.hideTimer);
delete(this.hideTimer);
if (this.hoverClass)
if (typeof this.triggerHighlight != 'undefined')
this.addClassName(this.triggerHighlight, this.hoverClass);
return;
var pos = Spry.Widget.Utils.getAbsoluteMousePosition(e);
this.pos = {x: pos.x + this.offsetX, y: pos.y + this.offsetY};
this.triggerHighlight = target;
Spry.Widget.Tooltip.closeAll();
this.displayTooltip(true);
Spry.Widget.Tooltip.prototype.onMouseMoveTrigger = function(e)
var pos = Spry.Widget.Utils.getAbsoluteMousePosition(e);
this.pos = {x: pos.x + this.offsetX, y: pos.y + this.offsetY};
if (this.visibleTooltip)
this.showTooltip();
Spry.Widget.Tooltip.prototype.onMouseOutTrigger = function(e)
var target = '';
if (Spry.is.ie)
target = e.toElement;
else
target = e.relatedTarget;
var contains = Spry.Widget.Utils.contains;
for (var i=0; i < this.triggerElements.length; i++)
if (contains(this.triggerElements[i], target))
return;
this.displayTooltip(false);
Spry.Widget.Tooltip.prototype.onMouseOutTooltip = function(e)
var target = '';
if (Spry.is.ie)
target = e.toElement;
else
target = e.relatedTarget;
var contains = Spry.Widget.Utils.contains;
if (contains(this.tooltipElement, target))
return;
this.displayTooltip(false);
Spry.Widget.Tooltip.prototype.onMouseOverTooltip = function(e)
if (this.hideTimer)
clearInterval(this.hideTimer);
delete(this.hideTimer);
if (this.hoverClass)
if (typeof this.triggerHighlight != 'undefined')
this.addClassName(this.triggerHighlight, this.hoverClass);
Spry.Widget.Tooltip.prototype.refreshTimeout = function()
if (Spry.Widget.Tooltip.refreshTimeout != null)
clearTimeout(Spry.Widget.Tooltip.refreshTimeout);
Spry.Widget.Tooltip.refreshTimeout = null;
Spry.Widget.Tooltip.refreshTimeout = setTimeout(Spry.Widget.Tooltip.refreshAll, 100);
Spry.Widget.Tooltip.prototype.destroy = function()
for (var k in this)
try{
if (typeof this.k == 'object' && typeof this.k.destroy == 'function') this.k.destroy();
delete this.k;
}catch(err){}
Spry.Widget.Tooltip.prototype.checkDestroyed = function()
// checks the parent node. If it exists, then the element is still in the DOM
if (!this.tooltipElement || this.tooltipElement.parentNode == null)
return true;
return false;
Spry.Widget.Tooltip.prototype.attachBehaviors = function()
var self = this;
var ev = Spry.Widget.Utils.addEventListener;
for (var i=0; i< this.triggerElements.length; i++)
ev(this.triggerElements[i], 'mouseover', function(e) {self.onMouseOverTrigger(e || event); return true;}, false);
ev(this.triggerElements[i], 'mouseout', function(e) {self.onMouseOutTrigger(e || event); return true;}, false);
if (this.followMouse)
ev(this.triggerElements[i], 'mousemove', function(e) {self.onMouseMoveTrigger(e || event); return true;}, false);
if (this.closeOnTooltipLeave)
ev(this.tooltipElement, 'mouseover', function(e){self.onMouseOverTooltip(e || event); return true;}, false);
ev(this.tooltipElement, 'mouseout', function(e){self.onMouseOutTooltip(e || event); return true;}, false);
this.listenersAttached = true;
// createIframeLayer for Tooltip
// creates an IFRAME underneath a tooltip element so that it will show above form controls and ActiveX
Spry.Widget.Tooltip.prototype.createIframeLayer = function(tooltip)
if (typeof this.iframeLayer == 'undefined')
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:"";';
layer.scrolling = 'no';
layer.frameBorder = '0';
layer.className = 'iframeTooltip';
tooltip.parentNode.appendChild(layer);
this.iframeLayer = layer;
this.iframeLayer.style.left = tooltip.offsetLeft + 'px';
this.iframeLayer.style.top = tooltip.offsetTop + 'px';
this.iframeLayer.style.width = tooltip.offsetWidth + 'px';
this.iframeLayer.style.height = tooltip.offsetHeight + 'px';
this.iframeLayer.style.display = 'block';
// removeIframeLayer for Tooltip Element
// removes an IFRAME underneath a tooltip to reveal any form controls and ActiveX
Spry.Widget.Tooltip.prototype.removeIframeLayer = function(tooltip)
if (this.iframeLayer)
this.iframeLayer.style.display = 'none';
Spry.Widget.Tooltip.prototype.showError = function(msg)
alert('Spry.Widget.Tooltip ERR: ' + msg);
Spry.Widget.Tooltip.refreshAll = function()
var q = Spry.Widget.Tooltip.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen ; i++)
if (q[i].checkDestroyed())
// the trigger element is no longer in the dom, we should remove the current widget.
q[i].destroy();
q.splice(i, 1);
i--;
qlen = q.length;
Spry.Widget.Tooltip.closeAll = function()
var q = Spry.Widget.Tooltip.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen ; i++)
if (q[i].visibleTooltip)
q[i].hideTooltip(true);
if (q[i].showTimer)
clearTimeout(q[i].showTimer);
if (q[i].hideTimer)
clearTimeout(q[i].hideTimer);
Spry.Widget.Tooltip.Animator = function(element, opts)
this.timer = null;
this.fps = 60;
this.duration = 500;
this.startTime = 0;
this.transition = Spry.Widget.Tooltip.Animator.defaultTransition;
this.onComplete = null;
if (typeof element == 'undefined') return;
this.element = Spry.Widget.Utils.getElement(element);
Spry.Widget.Utils.setOptions(this, opts, true);
this.interval = this.duration / this.fps;
Spry.Widget.Tooltip.Animator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.Tooltip.Animator.prototype.start = function()
var self = this;
this.startTime = (new Date).getTime();
this.beforeStart();
this.timer = setInterval(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.Tooltip.Animator.prototype.stop = function()
if (this.timer)
clearTimeout(this.timer);
this.timer = null;
Spry.Widget.Tooltip.Animator.prototype.stepAnimation = function(){};
Spry.Widget.Tooltip.Animator.prototype.beforeStart = function(){};
Spry.Widget.Tooltip.Animator.prototype.destroy = function()
for (var k in this)
try
delete this.k;
}catch(err){}
Spry.Widget.Tooltip.Fade = function(element, opts)
Spry.Widget.Tooltip.Animator.call(this, element, opts);
if (Spry.is.ie)
this.origOpacity = this.element.style.filter;
else
this.origOpacity = this.element.style.opacity;
Spry.Widget.Tooltip.Fade.prototype = new Spry.Widget.Tooltip.Animator();
Spry.Widget.Tooltip.Fade.prototype.constructor = Spry.Widget.Tooltip.Fade;
Spry.Widget.Tooltip.Fade.prototype.stepAnimation = function()
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
var i, obj;
if (elapsedTime >= this.duration)
this.beforeStop();
this.stop();
return;
var ht = this.transition(elapsedTime, this.from, this.to - this.from, this.duration);
if (Spry.is.ie)
var filter = this.element.style.filter.replace(/alpha\s*$\s*opacity\s*=\s*[0-9\.]{1,3}$/, '');
this.element.style.filter = filter + 'alpha(opacity=' + parseInt(ht * 100, 10) + ')';
else
this.element.style.opacity = ht;
this.element.style.visibility = 'visible';
this.element.style.display = 'block';
Spry.Widget.Tooltip.Fade.prototype.beforeStop = function()
if (this.from > this.to)
this.element.style.display = 'none';
if (Spry.is.mozilla)
this.element.style.filter = this.origOpacity;
else
this.element.style.opacity = this.origOpacity;
Spry.Widget.Tooltip.Blind = function(element, opts)
this.from = 0;
this.to = 100;
Spry.Widget.Tooltip.Animator.call(this, element, opts);
this.element.style.visibility = 'hidden';
this.element.style.display = 'block';
this.origHeight = parseInt(Spry.Widget.Utils.getStyleProperty(this.element, 'height'),10);
if (isNaN(this.origHeight))
this.origHeight = this.element.offsetHeight;
if (this.to == 0)
this.from = this.origHeight;
else
this.to = this.origHeight;
Spry.Widget.Tooltip.Blind.prototype = new Spry.Widget.Tooltip.Animator();
Spry.Widget.Tooltip.Blind.prototype.constructor = Spry.Widget.Tooltip.Blind;
Spry.Widget.Tooltip.Blind.prototype.beforeStart = function()
this.origOverflow = Spry.Widget.Utils.getStyleProperty(this.element, 'overflow');
this.element.style.overflow = 'hidden';
Spry.Widget.Tooltip.Blind.prototype.stepAnimation = function()
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
var i, obj;
if (elapsedTime >= this.duration)
this.beforeStop();
this.stop();
return;
var ht = this.transition(elapsedTime, this.from, this.to - this.from, this.duration);
this.element.style.height = Math.floor(ht) + 'px';
this.element.style.visibility = 'visible';
this.element.style.display = 'block';
Spry.Widget.Tooltip.Blind.prototype.beforeStop = function()
this.element.style.overflow = this.origOverflow;
if (this.from > this.to)
this.element.style.display = 'none';
this.element.style.height = this.origHeight + 'px';
// Spry.Widget.Utils
if (!Spry.Widget.Utils) Spry.Widget.Utils = {};
Spry.Widget.Utils.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.Utils.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.Utils.getElementsByClassName = function(sel)
if (!sel.length > 0)
return null;
var selectors = sel.split(',');
var el = [];
for (var i =0; i < selectors.length; i++)
var cs = selectors[i];
var chunk = cs.split(' ');
var parents = [];
parents[0] = [];
parents[0][0] = document.body;
for (var j = 0; j < chunk.length; j++)
var tokens = Spry.Widget.Utils.getSelectorTokens(chunk[j]);
for (var k =0; k < parents[j].length; k++)
var childs = parents[j][k].getElementsByTagName('*');
parents[j+1] = [];
for (var l=0; l < childs.length; l++)
if (Spry.Widget.Utils.hasSelector(childs[l], tokens))
parents[j+1].push(childs[l]);
if (parents[j])
for (var k = 0; k < parents[j].length; k++)
el.push(parents[j][k]);
return el;
Spry.Widget.Utils.firstValid = function()
var ret = null;
var a = Spry.Widget.Utils.firstValid;
for(var i=0; i< a.arguments.length; i++)
if (typeof(a.arguments[i]) != 'undefined')
ret = a.arguments[i];
break;
return ret;
Spry.Widget.Utils.getSelectorTokens = function(str)
str = str.replace(/\./g, ' .');
str = str.replace(/\#/g, ' #');
str = str.replace(/^\s+|\s+$/g,"");
return str.split(' ');
Spry.Widget.Utils.hasSelector = function(el, tokens)
for (var i =0; i< tokens.length; i++)
switch (tokens[i].charAt(0))
case '.': if (!el.className || el.className.indexOf(tokens[i].substr(1)) == -1) return false; break;
case '#': if (!el.id || el.id != tokens[i].substr(1)) return false; break;
default: if (el.nodeName.toLowerCase != tokens[i]) return false; break;
return true;
Spry.Widget.Utils.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.Utils.getStyleProperty = function(element, prop)
var value;
var camelized = Spry.Widget.Utils.camelize(prop);
try
if (element.style)
value = element.style[camelized];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[camelized];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.Utils.camelize = function(str)
if (str.indexOf('-') == -1)
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
* Spry.Widget.Utils.getPixels
* returns the value of a CSS property as Int, converting medium to 2
* @param {DOMElement} m - elements
* @param {String} s -
Spry.Widget.Utils.getPixels = function (m, s)
var v = Spry.Widget.Utils.getStyleProperty(m, s);
if (v == "medium") {
v = 2;
} else {
v = parseInt(v, 10);
v = isNaN(v)?0:v;
return v;
Spry.Widget.Utils.getAbsoluteMousePosition = function(ev)
var pos = {x:0, y:0};
if (ev.pageX)
pos.x = ev.pageX;
else if (ev.clientX)
pos.x = ev.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
if (isNaN(pos.x)) pos.x = 0;
if (ev.pageY)
pos.y = ev.pageY;
else if (ev.clientY)
pos.y = ev.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
if (isNaN(pos.y)) pos.y = 0;
return pos;
* Spry.Widget.Utils.getBorderBox
* returns a border box object (x,y,width,height) which perfectly covers the el element and its borders
* the x, y are absolute coordinates measured from from the window viewport
* use the box as the second parameter in Spry.Widget.Utils.setBorderBox
* @param {DOMElement or String} el -
* @param {DOMDocument,optional} doc -
Spry.Widget.Utils.getBorderBox = function (el, doc)
doc = doc || document;
if (typeof el == 'string')
el = doc.getElementById(el);
if (!el)
return false;
if (el.parentNode === null || Spry.Widget.Utils.getStyleProperty(el, 'display') == 'none')
//element must be visible to have a box
return false;
var ret = {x:0, y:0, width:0, height:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
ret.width = box.right - box.left;
ret.height = box.bottom - box.top;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
ret.width = box.width;
ret.height = box.height;
var btw = Spry.Widget.Utils.getPixels(el, "border-top-width");
var blw = Spry.Widget.Utils.getPixels(el, "border-left-width");
ret.x -= blw;
ret.y -= btw;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
ret.width = el.offsetWidth;
ret.height = el.offsetHeight;
parent = el.offsetParent;
if (parent != el)
while (parent)
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
var blw = Spry.Widget.Utils.getPixels(el, "border-left-width");
var btw = Spry.Widget.Utils.getPixels(el, "border-top-width");
ret.x -= blw;
ret.y -= btw;
// opera & (safari absolute) incorrectly account for body offsetTop
var ua = navigator.userAgent.toLowerCase();
if (Spry.is.opera || Spry.is.safari && Spry.Widget.Utils.getStyleProperty(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')
ret.x -= (isNaN(parent.scrollLeft) ? 0 : parent.scrollLeft);
ret.y -= (isNaN(parent.scrollTop) ? 0 : parent.scrollTop);
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
* Spry.Widget.Utils.setBorderBox
* puts the element el to the location specified by box
* @param {DOMElement} el - the element to be placed
* @param {Object} box - hash containing the x and y coordinates where to put el
Spry.Widget.Utils.setBorderBox = function (el, box) {
var pos = Spry.Widget.Utils.getBorderBox(el, el.ownerDocument);
if (pos === false)
return false;
var delta = {
x:Spry.Widget.Utils.getPixels(el, 'left'),
y:Spry.Widget.Utils.getPixels(el, 'top')
var new_pos = {x:0, y:0, w:0, h:0};
if (typeof box.x == 'number') {
new_pos.x = box.x - pos.x + delta.x;
if (typeof box.y == 'number') {
new_pos.y = box.y - pos.y + delta.y;
if (typeof box.x == 'number') {
el.style.left = new_pos.x + 'px';
if (typeof box.y == 'number') {
el.style.top = new_pos.y + 'px';
return true;
Spry.Widget.Utils.putElementAt = function (source, target, offset, biv)
biv = Spry.Widget.Utils.firstValid(biv, true);
var source_box = Spry.Widget.Utils.getBorderBox(source, source.ownerDocument);
Spry.Widget.Utils.setBorderBox(source, target);
if (biv)
Spry.Widget.Utils.bringIntoView(source);
return true;
* Spry.Widget.Utils.bringIntoView
* set the position of the source element so it is completely visible in the window
* @param {DOMElemenet} source - the element to be
Spry.Widget.Utils.bringIntoView = function (source) {
var box = Spry.Widget.Utils.getBorderBox(source, source.ownerDocument);
if (box === false) {
return false;
var current = {
x:Spry.Widget.Utils.getPixels(source, 'left'),
y:Spry.Widget.Utils.getPixels(source, 'top')
var delta = {x:0, y:0};
var offset_fix = {x:0, y:0};
var strictm = source.ownerDocument.compatMode == "CSS1Compat";
var doc = (Spry.is.ie && strictm || Spry.is.mozilla)?source.ownerDocument.documentElement:source.ownerDocument.body;
offset_fix.x = Spry.Widget.Utils.getPixels(doc, 'border-left-width');
offset_fix.y = Spry.Widget.Utils.getPixels(doc, 'border-top-width');
var st = doc.scrollTop;
var ch = self.innerHeight ? self.innerHeight : doc.clientHeight;
var t = box.y + (Spry.is.ie?-offset_fix.y:offset_fix.y);
var b = box.y + box.height + (Spry.is.ie?-offset_fix.y:offset_fix.y);
if ( b - st > ch) {
delta.y = ch - (b - st);
if (t + delta.y < st) {
delta.y = st-t;
} else if (t < st) {
delta.y = st - t;
if (delta.y != 0) {
source.style.top = (current.y + delta.y) + 'px';
var sl = doc.scrollLeft;
var cw = doc.clientWidth;
var l = box.x + (Spry.is.ie?-offset_fix.x:offset_fix.x);
var r = box.x + box.width + (Spry.is.ie?-offset_fix.x:offset_fix.x);
if ( r - sl > cw) {
delta.x = cw - (r - sl);
if (l + delta.x < sl) {
delta.x = sl-l;
} else if (l < sl) {
delta.x = sl - l;
if (delta.x != 0) {
source.style.left = (current.x + delta.x) + 'px';
Spry.Widget.Utils.contains = function (who, what) {
if (typeof who.contains == 'object') {
return what && who && (who == what || who.contains(what));
} else {
var el = what;
while(el) {
try{
if (el == who) {
return true;
el = el.parentNode;
}catch(a){return false;}
return false;
})(); // EndSpryComponent
@charset "UTF-8";
/* SpryTooltip.css - version 0.2 - Spry 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* HACK FOR IE: to make sure the tooltips show above form controls, we underlay each tooltip with an iframe */
.iframeTooltip
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
.tooltipContent
font-size: 11px;
font-style: italic;
color: #332c40;
width: 96px;
height: 51px;
background: url(../_images/recipe/bubble2.png) no-repeat;
font-family: "Comic Sans MS", cursive;
margin: 0px;
left: -200px;
top: -200px;
padding-top: 5px;
vertical-align: middle;
position: fixed;

I couldn't get this script to work with my code:
<a id="greensource" href="a"><img src="images/greensource.png" alt="Greensource Initiative" width="193" height="71" border="0" usemap="#Map7" id="sprytrigger6" title="Greensource Initiative" />
<map name="Map7" id="Map7">
<area shape="rect" coords="-22,-15,197,79" href="#" />
</map>
</a>
<div class="tooltipContent" id="green">
<div class="secondback">
<div style="padding: 15px;">
<h1>GREENSOURCE</h1>
<h2>INITIATIVE™</h2>
<p>Manufactred within Greensource Initiative™ guildelines for use of recycled materials, renewable energy and non-hazardous packaging materials. RoHS Compliant.</p>
<p class="morebutton"><a href="#">LEARN MORE</a></p>
</div>
</div>
</div>
<script type="text/javascript">

</script>
Maybe someone can point out my problem?
CSS:
.tooltipContent
    margin: 0;
    padding: 0;
    background: #FFF url(../images/bottom-gradient.png) repeat-x bottom left;
    font-family: "Myriad Pro", Tahoma, Geneva, sans-serif;
    text-align: left;
    box-shadow: 2px 2px 4px #b6b5b6;
    -webkit-box-shadow: 2px 2px 4px #b6b5b6;
    -moz-box-shadow: 2px 2px 4px #b6b5b6;
    position: fixed;
#green {
    position: absolute;
    border: none;
    top: 200px;
    left: 200px;

OBIEE 11g : Tool tip on a report link

Hello All,
Is it possible to add a mouse over tool tip to a report link on a dashboard page (not on column heading) ?
The dashboard currently has descriptions for the report links to see what is the report usage and it is eating up a lot of space , the idea is to eliminate this notes section and provide information to the user so as to what the report is as a tool tip.
I have seen OTN threads on tool tips on to reports and column headers but I would like to just specifically add the mouse over pop-up to a report link that exists on a dashboard page.
Any suggestions , please advice.
Thanks,
-VS

There is a way using JavaScript, right now I dont have code to share with you.
Assuming your report name is "Summary Report", using JavaScript search for this "Summary Report" on dashboard and apply CSS script something like mouseover.
You may get code in pieces on net, try it out.
I too try to help you with code but take some time ;)

Tool Tip Font Size

Hello,
Is it possible to change the font size of a tool tip?
On Macintosh I have been using terminal to do this from the system, but it does not work. It does do some very odd things with labels in the open dialog.
defaults write com.adobe.InDesign NSToolTipsFontSize -int 18
I did the same on a system wide basis and the only application it worked on was Skype.
It would be nice to 'patch' the tool tips in InDesign.
Best

Hi Vishal,
The following example might help you. I tested/created it for:
Application Theme: Platinum
Chart Type: Column
but it might/should work for other themes and charts too.
Tooltip before:
Tooltip after:
The generated html source code of the tooltip by sap design studio looks like this:
I used the following css in my custom css file:
.myChart1 .v-m-tooltip .v-background {background: black !important;}
.myChart1 .v-m-tooltip table.v-tooltip-dimension-measure tr td:nth-child(1) {color: red !important;}
.myChart1 .v-m-tooltip table.v-tooltip-dimension-measure tr td:nth-child(2) {color: green !important;}
.myChart1 .v-m-tooltip table.v-tooltip-dimension-measure:before {content: "Current data is:"; color: orange;}
As you can see I created a custom css class "myChart1" and then applied it to my chart under "Display > CSS Class".
Regards
David

Spry Tool Tip problem - Help please!

When I add a tool tip to my template, it does not work when I roll over the object, and it shows the the text it is supposed to display at the bottom of the page.
It works fine on other pages where I've tested it, but not on this site.
Here is a page where you can see what it's doing.
Thanks!

Hi Bill,
could it be that your DW doesn't "find" your SpryAssets directory? I've intendedly nested it very deep and it works like a charm. In this case I had to write:
<script src="../../SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<link href="../../SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
Hans-Günter

Tool Tip Text for field values in ALV report

Hi,
How to get the tool tip text for the field values in ALV report.
Thanks & Regards,
Pallavi.

Hi,
In fieldcatalog specify the TOOLTIP.
<b>
LVC_S_FCAT-TOOLTIP
</b>
In this speicfyteh tooltip you want.
Then append this to the fieldcatalog.
Hope this solves ur problem.

Enable tool tip in Exported PDF document from a CRE Report

Hi All,
We are on BObj 4.0 and using CRE for our reports. We have enabled Tool tip text on mouse over for certain labels which works great in browser. When we export to PDF, we dont see the Tool tip text. Is there a way we can configure this in CRE so that the exported PDF also shows the Tool tip text?
Regards,
Sundar

I checked online and found this Note - 1567798 - Crystal Reports does not export Tool Tips when exported to Pdf Format. Does this apply to CRE also or just CR 2008?
Regards,
Sundar

JSlider + Display value in a text tool tip box

Hello,
I am new to Java. I want to display the value in a text tool tip box of the JSlider as the user moves the knob . Is there any way to achieve this.
I tried setting up the value of text tool tip in the stateChanged method. But that didn't helped
Ritesh

Finally Got it working. Below I am attaching the code for reference
Thanks for your code. It came very handy
The only problem is that toolTextTip is appearing on one side rather than below the cursor.
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
public class EventTest
public static void main(String[] args)
JFrame f = new JFrame();
System.out.println("starting application");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.getContentPane().add(new setSlider(),"North");
JSlider slide = new JSlider();
slide.setToolTipText("Hello");
f.getContentPane().add(slide,"South");
f.setSize(400,400);
f.setLocation(200,200);
f.setVisible(true);
class setSlider extends JSlider implements ChangeListener, MouseMotionListener{
public setSlider(){
setToolTipText("hello " + new Integer(getValue()).toString());
this.setMaximum(10);
this.setMinimum(0);
this.setValue(2);
this.setMajorTickSpacing(2);
this.setMinorTickSpacing(1);
this.setPaintTicks(true);
this.setPaintLabels(false);
this.addMouseMotionListener(this);
this.addChangeListener(this);
public void stateChanged(ChangeEvent e) {
setToolTipText(new Integer(getValue()).toString());
System.out.println(this.getToolTipText());
KeyStroke controlF1 = KeyStroke.getKeyStroke("control F1");
ActionListener toolTipAction = getActionForKeyStroke( controlF1 );
if (toolTipAction != null)     {
ActionEvent postTip = new ActionEvent(this, ActionEvent.ACTION_PERFORMED, "");
toolTipAction.actionPerformed( postTip );
public void mouseDragged(MouseEvent e){
System.out.println("here");
setToolTipText(new Integer(getValue()).toString());
System.out.println(this.getToolTipText());
KeyStroke controlF1 = KeyStroke.getKeyStroke("control F1");
ActionListener toolTipAction = getActionForKeyStroke( controlF1 );
if (toolTipAction != null)     {
ActionEvent postTip = new ActionEvent(this, ActionEvent.ACTION_PERFORMED, "");
toolTipAction.actionPerformed( postTip );
public void mouseMoved(MouseEvent e){

How to put Tool Tip in JSP page

Hello.
How can i put Tool Tip in JSP page and also html page.

title="value"
put this in all the tags whereever it is required

How can I turn off the yellow pop-up tool tips?

Howdy,
I have searched high and low in the preferences and found nothing that does the trick. How can I turn off the yellow pop-up tool tips?
See attached screen shot. They are incredibly annoying. It's probably obvious, but I cannot find it anywhere on internets or this forum.
Thanks!

Thanks Nancy. Unfortunately that doesn't do it. I turned those off awhile back. Nor can I find anything under VIEW that seems to make a difference. Just FYI: I'm on a Mac OS w/Dreamweaver CS6 - but this has happened on previous versions of DW. Thanks again.

How to implement tool-tip for the list items for the Choice column in SharePoint 2013

I had created a simple list with a "Choice" column, i have three entries in my drop-down,
First Entry
Second Entry
Third Entry.
If i select any entries in drop-down and hour-over (Second Entry), a
tool-tip need need to show.
Is it possible? If yes how to implement any help will be appreciated.

Hi,
We can use JavaScript to achieve it.
The following code for your reference:
<script type="text/javascript" src="/sites/DennisSite/Shared%20Documents/js/wz_tooltip.js"></script>
<script type="text/javascript" src="/sites/DennisSite/Shared%20Documents/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("select[title='Choice']").change(function(){
Tip($(this).val());
$("select[title='Choice']").mouseout(function(){
UnTip();
</script>
Download wz_tooltip.js:
http://www.walterzorn.de/en/tooltip/tooltip_e.htm#download
Best Regards
Dennis Guo
TechNet Community Support

I would like to see the actual email address in a Tool Tip when I mouse over the From address

I use Thunderbird to access my IMAP email account with a non-enormous ISP. Thunderbird is a great email client.
One thing I really miss when using Thunderbird vs. going to my email using a browser: in the browser, when I mouse over the From email address, a tool tip pops up showing me the actual email address, not the alias (or whatever it's called). Please see the attached image for an example of the mouse over tool tip. Is there a way to do this in Thunderbird?

more misinformation and urban myths here than facts.
1. Thunderbird blocks remote images by default.
2. Thunderbird does not allow scripts in mail. If they are there they do not run.
3. The only link SPAMMERS or anybody in marketing gets to you is when you download their remote images, run scripts in the mail or click on links to go to their web sites.
4. When I or a spammer send a mail to say [email protected] Most mail servers will refuse delivery unless the address exists on their server.
5. True spammers do not care if a large percentage of the mail they send is to dead email addresses and they make little or no effort to validate active addresses. Corporations like Walmart, Woolworths here in Australia, Ebay and Paypal are very interested.
With that knowledge, you are now aware that opening the mail tells a spammer nothing even in the remote chance they are interested.
Oh and the source of the urban myth is Microsoft whose mail clients allow scripting, remote images and uses the file extension of the file not it's mime type to determine how to open it.
That is the difference between a mail client where the developers think security first and one where the developers give the user what they want and try to tack on security after the fact.

How do I set a Unicode tool tip on an AVToolButton?

We're finally porting our Acrobat (8/9/X/XI) plug-in to be fully Unicode-compliant, so that we can show our UI in Japanese and other languages which require double-byte characters.
I've figured out how to rework most of our 8-bit calls, such as replacing AVMenuItemNew() with AVMenuItemNewWithASText(), AVAlert() with AVAlertWithParams(), etc.
But I'm stuck on the tooltips for our toolbar buttons. We had been calling AVToolButtonSetHelpText(), which takes an 8-bit char string. But there's no ASText version of this function, as far as I can tell.
I've tried calling both AVToolButtonSetComputeTooltipProc() and AVToolButtonSetNotifyTooltipProc(), but my callback functions never get called. Similar callbacks registered with AVToolButtonSetComputeMarkedProc(), AVToolButtonSetComputeEnabledProc(), and AVToolButtonSetExecuteProc() work just fine, and I'm calling the AVToolButtonSet***TooltipProc functions the same way, but the tooltip callbacks never fire (at least not under Acrobat XI on Windows, which is my development environment).
I'm not actually sure whether AVToolButtonSetComputeTooltipProc() or AVToolButtonSetNotifyTooltipProc() is what I need to do, or exactly what the difference between the two callbacks is. Also, the documentation for AVNotifyTooltipProc says, "It returns text that is displayed in the tooltip," but AVNotifyTooltipProc is a declaration for a function returning void, so I'm not sure what the doc means by "It returns text." The AVComputeTooltipProc callback seems more sensible, as it returns ASText, but like I said, I can't get either one to fire. Although the doc for AVComputeTooltipProc is a bit confusing as well, as it says it's "used to get the mega-tooltip help text for a toolbar button." What exactly does it mean by, "mega-tooltip?" Is that a clue that a "mega" tooltip is somehow fundamentally different than a regular (non-"mega") tooltip?
So, what exactly do I need to to in order to set Unicode tool tips on my toolbar buttons?

Agreed, Unicode is the way to go.
I would still appreciate it if someone could answer these specific questions:
Is there any supported way to set Unicode tool tips in Acrobat 9?
Why are my callbacks registered with AVToolButtonSetComputeTooltipProc() and AVToolButtonSetNotifyTooltipProc() never being called? Do these functions simply not work? Or am I doing something wrong?
Thanks!

CSS Tool Tips

Similar Messages

Maybe you are looking for