You can't add a class to the cftooltip tag itself. Personally, I wouldn't use
the CF UI tags. You'll get more control using any of the many tooltip jQuery
plugins out there. That said
You can always add a style inline using the style attribute. I assume there's a
reason you're not doing that.
Use Google Developer Tools to see the actual HTML rendered by CF and JavaScript
(View source only shows you the HTML, not the rendered DOM). By doing this, I
saw (in CF10):
tooltip is in a div with class of yui-tt, so you can do something like the
following:
<style>
.yui-tt {background:blue;}
</style>
Of course, this would be global. Multiple tooltips, each with their own style?
The text you hover over is enclosed in a span, with an id of
cf_tooltip_(somerandomid). The tooltip itself is in a div with the span's id
appended with "_cf_tooltip". Wrapping <cftooltip> with a div makes it easy to
perform specific tasks on that tooltip:
<div id="gotcha">
<cftooltip
autoDismissDelay="5000"
hideDelay="250"
showDelay="200"
tooltip="Hey I am a tooltip generated by CF!">
Hover over me please
</cftooltip>
</div>
Then use jQuery to act on it and set a class: (assuming you've setup .redbg in
your CSS)
<script src="http://code.jquery.com/jquery-1.8.3.min.js";></script>
<script>
$(function() {
$('#gotcha').mouseover(function(){
el = $(this).find('span[id^=cf_tooltip_]');
tooltipId=el.attr('id')+'_cf_tooltip';
$('#'+tooltipId).addClass('redbg');
});
});
</script>
Problem: the tooltip div isn't created until it's called the first time, so the
first time, it'll have the default style. May be a way to cancel the mouseover
event the first time, set the class, and then re-fire.
Billy Cravens
[email protected]
On Dec 21, 2012, at 5:35 PM, Stephen Hait <[email protected]> wrote:
>
> I'm looking for an example of specifying style info for a cftooltip. I'd
> like to specify a class in a style sheet and reference that from the
> cftooltip tag. If that's not possible, how else can I go about this?
>
> Thanks,
> Stephen
>
>
>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:353607
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
