{"id":202,"date":"2010-02-12T10:36:20","date_gmt":"2010-02-12T15:36:20","guid":{"rendered":"http:\/\/www.cfchimp.com\/wordpress\/?p=202"},"modified":"2024-12-05T12:10:27","modified_gmt":"2024-12-05T17:10:27","slug":"using-jquery-style-a-cftooltip-span","status":"publish","type":"post","link":"https:\/\/csimmons.dev\/blog\/2010\/02\/using-jquery-style-a-cftooltip-span\/","title":{"rendered":"Using jQuery style a cftooltip span"},"content":{"rendered":"

It’s not hard to figure out how to style the box that pops up when using cftooltip.\u00a0 It is controlled by the .yui-tt class.
\n
\n\/* Tool tip styling *\/
\n.yui-tt {
\ncolor: #444;
\nfont-size:110%;
\nborder: 2px solid #1C64D1;
\nbackground-color: #eee;
\npadding: 10px;
\nwidth:250px;
\ncursor:help;
\n}<\/code><\/p>\n

But how do you style the text that is triggering the tooltip?\u00a0 cftooltip is going to generate a span around your text with the id of cf_tooltip_999999999 (where 999999999 is some random number).\u00a0 I didn’t want to add another span to the mix to provide styling so I turned to jQuery for a simple, quick solution.<\/p>\n

In the css file I added a class:
\n
\n.terms{
\ncolor:#168FC0;
\nborder-bottom:1px dashed #168FC0;
\ntext-decoration:none;
\nmargin-bottom:10px;
\nfont-weight:bold;
\n}
\n<\/code>
\nIn the jQuery .ready() function I added this line:
\n
\n$(\"[id^=cf_tooltip_]\").addClass(\"terms\");
\n<\/code>
\nThe result is that the text which triggers all cftooltips is now controlled by the .terms class.<\/p>\n","protected":false},"excerpt":{"rendered":"

It’s not hard to figure out how to style the box that pops up when using cftooltip.\u00a0 It is controlled by the .yui-tt class. \/* Tool tip styling *\/ .yui-tt { color: #444; font-size:110%; border: 2px solid #1C64D1; background-color: #eee; padding: 10px; width:250px; cursor:help; } But how do you style the text that is triggering … Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_cloudinary_featured_overwrite":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[68],"tags":[48,26],"class_list":["post-202","post","type-post","status-publish","format-standard","hentry","category-developer","tag-coldfusion","tag-javascript"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pbVg43-3g","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/csimmons.dev\/blog\/wp-json\/wp\/v2\/posts\/202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/csimmons.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/csimmons.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/csimmons.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/csimmons.dev\/blog\/wp-json\/wp\/v2\/comments?post=202"}],"version-history":[{"count":0,"href":"https:\/\/csimmons.dev\/blog\/wp-json\/wp\/v2\/posts\/202\/revisions"}],"wp:attachment":[{"href":"https:\/\/csimmons.dev\/blog\/wp-json\/wp\/v2\/media?parent=202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csimmons.dev\/blog\/wp-json\/wp\/v2\/categories?post=202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csimmons.dev\/blog\/wp-json\/wp\/v2\/tags?post=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}