{"id":682,"date":"2004-01-22T11:32:31","date_gmt":"2004-01-22T09:32:31","guid":{"rendered":"\/\/?p="},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T23:00:00","slug":"tooltip-con-css","status":"publish","type":"post","link":"https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/","title":{"rendered":"tooltip con CSS"},"content":{"rendered":"<p>giusto qualche giorno fa chiedevo a <a href=\"http:\/\/www.christianfusi.com\/blog.html\">futa<\/a> se avesse qualche idea di come associare ad un tooltip un particolare CSS, ed ecco che su redemption oggi pubblicano la <a href=\"http:\/\/blog.codefront.net\/archives\/2004\/01\/22\/tooltips_with_css.php\">soluzione<\/a> ai miei problemi!<\/p>\n<p><strong>aggiornamento del 23\/02\/04 ore 0.40<\/strong><br \/>\necco come ho risolto io:<\/p>\n<blockquote><p>.tooltip {<br \/>\n\tborder-bottom: 1px dashed #ccc<br \/>\n        z-index: 2;<br \/>\n\tmargin: 0px;<br \/>\n\tdisplay: block;<br \/>\n}<\/p>\n<p>.tooltip[desc]:hover:after {<br \/>\n\tdisplay:block;<br \/>\n\tcontent:&#8221;&#8221;attr(desc)&#8221;&#8221;;<br \/>\n\tborder:1px solid #ccc;<br \/>\n\tcolor:#000;<br \/>\n\tbackground:#f4f1e8;<br \/>\n\tz-index: 3;<br \/>\n\tmargin: -10px 0px 0px 0px;<br \/>\n\twidth: 100px;<br \/>\n}<\/p>\n<p>&lt;span class=&#8217;tooltip&#8217; desc=&#8217;il tooltip \u00e8 colorato, ci\u00f2 render\u00e0 il mondo migliore!&#8217;&gt;tooltip&lt;\/span&gt;\n<\/p><\/blockquote>\n<p>ho usato l&#8217;attributo <em>desc<\/em> (di mia invenzione e quindi non valido) perch\u00e8 il tooltip normale di <em>title<\/em> veniva visualizzato ugualmente :(<\/p>\n<p>ho trovato inoltre altri esempi sui tooltip (e CSS avanzati) su <a href=\"http:\/\/www.literarymoose.info\/=\/synopsis\/popups.xhtml\">literarymoose<\/a><\/p>\n<p>ciuaz<\/p>\n","protected":false},"excerpt":{"rendered":"<p>giusto qualche giorno fa chiedevo a futa se avesse qualche idea di come associare ad un tooltip un particolare CSS, ed ecco che su redemption oggi pubblicano la soluzione ai miei problemi! aggiornamento del 23\/02\/04 ore 0.40 ecco come ho risolto io: .tooltip { border-bottom: 1px dashed #ccc z-index: 2; margin: 0px; display: block; } [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":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":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5],"tags":[],"class_list":["post-682","post","type-post","status-publish","format-standard","hentry","category-tecnologia"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>tooltip con CSS - Fullo<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"tooltip con CSS - Fullo\" \/>\n<meta property=\"og:description\" content=\"giusto qualche giorno fa chiedevo a futa se avesse qualche idea di come associare ad un tooltip un particolare CSS, ed ecco che su redemption oggi pubblicano la soluzione ai miei problemi! aggiornamento del 23\/02\/04 ore 0.40 ecco come ho risolto io: .tooltip { border-bottom: 1px dashed #ccc z-index: 2; margin: 0px; display: block; } [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Fullo\" \/>\n<meta property=\"article:published_time\" content=\"2004-01-22T09:32:31+00:00\" \/>\n<meta name=\"author\" content=\"Francesco Fullone\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fullo\" \/>\n<meta name=\"twitter:site\" content=\"@fullo\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Francesco Fullone\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/2004\\\/01\\\/22\\\/tooltip-con-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/2004\\\/01\\\/22\\\/tooltip-con-css\\\/\"},\"author\":{\"name\":\"Francesco Fullone\",\"@id\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/#\\\/schema\\\/person\\\/24e91bc6caea6c411a8668df5639428c\"},\"headline\":\"tooltip con CSS\",\"datePublished\":\"2004-01-22T09:32:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/2004\\\/01\\\/22\\\/tooltip-con-css\\\/\"},\"wordCount\":132,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/#\\\/schema\\\/person\\\/24e91bc6caea6c411a8668df5639428c\"},\"articleSection\":[\"tecnologia\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.fullo.net\\\/blog\\\/2004\\\/01\\\/22\\\/tooltip-con-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/2004\\\/01\\\/22\\\/tooltip-con-css\\\/\",\"url\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/2004\\\/01\\\/22\\\/tooltip-con-css\\\/\",\"name\":\"tooltip con CSS - Fullo\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/#website\"},\"datePublished\":\"2004-01-22T09:32:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/2004\\\/01\\\/22\\\/tooltip-con-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.fullo.net\\\/blog\\\/2004\\\/01\\\/22\\\/tooltip-con-css\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/2004\\\/01\\\/22\\\/tooltip-con-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"tooltip con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/\",\"name\":\"Fullo\",\"description\":\"nulla e&#039; impossibile per chi non lo deve fare!\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/#\\\/schema\\\/person\\\/24e91bc6caea6c411a8668df5639428c\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/#\\\/schema\\\/person\\\/24e91bc6caea6c411a8668df5639428c\",\"name\":\"Francesco Fullone\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/www.fullo.net\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/hawiaina-gold-circled-white.png?fit=622%2C622&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.fullo.net\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/hawiaina-gold-circled-white.png?fit=622%2C622&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.fullo.net\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/hawiaina-gold-circled-white.png?fit=622%2C622&ssl=1\",\"width\":622,\"height\":622,\"caption\":\"Francesco Fullone\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/www.fullo.net\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/hawiaina-gold-circled-white.png?fit=622%2C622&ssl=1\"},\"sameAs\":[\"http:\\\/\\\/www.fullo.net\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/fullo\",\"https:\\\/\\\/x.com\\\/fullo\"],\"url\":\"https:\\\/\\\/www.fullo.net\\\/blog\\\/author\\\/fullo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"tooltip con CSS - Fullo","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/","og_locale":"en_US","og_type":"article","og_title":"tooltip con CSS - Fullo","og_description":"giusto qualche giorno fa chiedevo a futa se avesse qualche idea di come associare ad un tooltip un particolare CSS, ed ecco che su redemption oggi pubblicano la soluzione ai miei problemi! aggiornamento del 23\/02\/04 ore 0.40 ecco come ho risolto io: .tooltip { border-bottom: 1px dashed #ccc z-index: 2; margin: 0px; display: block; } [&hellip;]","og_url":"https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/","og_site_name":"Fullo","article_published_time":"2004-01-22T09:32:31+00:00","author":"Francesco Fullone","twitter_card":"summary_large_image","twitter_creator":"@fullo","twitter_site":"@fullo","twitter_misc":{"Written by":"Francesco Fullone","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/#article","isPartOf":{"@id":"https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/"},"author":{"name":"Francesco Fullone","@id":"https:\/\/www.fullo.net\/blog\/#\/schema\/person\/24e91bc6caea6c411a8668df5639428c"},"headline":"tooltip con CSS","datePublished":"2004-01-22T09:32:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/"},"wordCount":132,"commentCount":0,"publisher":{"@id":"https:\/\/www.fullo.net\/blog\/#\/schema\/person\/24e91bc6caea6c411a8668df5639428c"},"articleSection":["tecnologia"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/","url":"https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/","name":"tooltip con CSS - Fullo","isPartOf":{"@id":"https:\/\/www.fullo.net\/blog\/#website"},"datePublished":"2004-01-22T09:32:31+00:00","breadcrumb":{"@id":"https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.fullo.net\/blog\/2004\/01\/22\/tooltip-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fullo.net\/blog\/"},{"@type":"ListItem","position":2,"name":"tooltip con CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.fullo.net\/blog\/#website","url":"https:\/\/www.fullo.net\/blog\/","name":"Fullo","description":"nulla e&#039; impossibile per chi non lo deve fare!","publisher":{"@id":"https:\/\/www.fullo.net\/blog\/#\/schema\/person\/24e91bc6caea6c411a8668df5639428c"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fullo.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.fullo.net\/blog\/#\/schema\/person\/24e91bc6caea6c411a8668df5639428c","name":"Francesco Fullone","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/www.fullo.net\/blog\/wp-content\/uploads\/2024\/10\/hawiaina-gold-circled-white.png?fit=622%2C622&ssl=1","url":"https:\/\/i0.wp.com\/www.fullo.net\/blog\/wp-content\/uploads\/2024\/10\/hawiaina-gold-circled-white.png?fit=622%2C622&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.fullo.net\/blog\/wp-content\/uploads\/2024\/10\/hawiaina-gold-circled-white.png?fit=622%2C622&ssl=1","width":622,"height":622,"caption":"Francesco Fullone"},"logo":{"@id":"https:\/\/i0.wp.com\/www.fullo.net\/blog\/wp-content\/uploads\/2024\/10\/hawiaina-gold-circled-white.png?fit=622%2C622&ssl=1"},"sameAs":["http:\/\/www.fullo.net","https:\/\/www.linkedin.com\/in\/fullo","https:\/\/x.com\/fullo"],"url":"https:\/\/www.fullo.net\/blog\/author\/fullo\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3OSc1-b0","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1852,"url":"https:\/\/www.fullo.net\/blog\/2006\/01\/18\/tooltip-design-pattern-ed-altro\/","url_meta":{"origin":682,"position":0},"title":"Tooltip, design pattern ed altro","author":"Francesco Fullone","date":"18\/01\/2006","format":false,"excerpt":"Post riassunto delle chicche tecnologiche scovate negli ultimi giorni: Tooltip.js: un piccolo javascript che si affianca a scriptacoulus per la gestione di tooltip animati e non Design Pattern in Dynamic Programming: slide che spiegano il paradigma del design pattern. Sono state scritte quasi 10 anni fa ma rimangono attualissime php4it\u2026","rel":"","context":"In &quot;ajax&quot;","block_context":{"text":"ajax","link":"https:\/\/www.fullo.net\/blog\/category\/tecnologia\/ajax\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":100,"url":"https:\/\/www.fullo.net\/blog\/2003\/01\/31\/css-e-bug\/","url_meta":{"origin":682,"position":1},"title":"css e bug","author":"Francesco Fullone","date":"31\/01\/2003","format":false,"excerpt":"ho aggiornato finalmente la template ed il css del mio \"bellissimo\" blog ma ho qualche problema con il caricamento dinamico dei css... qualche suggerimento? ciuaz aggiornamento delle 14:01 ho risolto il problema modificando il javascript scaricato da Constile :D adesso devo risolvere la differenza di visualizzazione tra mozilla e ie,\u2026","rel":"","context":"In &quot;tecnologia&quot;","block_context":{"text":"tecnologia","link":"https:\/\/www.fullo.net\/blog\/category\/tecnologia\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1606,"url":"https:\/\/www.fullo.net\/blog\/2005\/08\/23\/css-javascript-e-dintorni\/","url_meta":{"origin":682,"position":2},"title":"CSS, javascript e dintorni","author":"Francesco Fullone","date":"23\/08\/2005","format":false,"excerpt":"Non so per quale arcano motivo ma mi hanno convinto a lavorare ad un sito pseudo-dinamico con una marea di file statici da includere di volta in volta ed un backend di pubblicazione eventi scritto da un dislessico con grossi problemi di afasia. Quindi per necessit\u00e0 di rinfrescarmi la memoria\u2026","rel":"","context":"In &quot;pensieri&quot;","block_context":{"text":"pensieri","link":"https:\/\/www.fullo.net\/blog\/category\/pensieri\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1929,"url":"https:\/\/www.fullo.net\/blog\/2006\/04\/19\/qualche-problema-per-slimstat\/","url_meta":{"origin":682,"position":3},"title":"Qualche problema per SlimStat","author":"Francesco Fullone","date":"19\/04\/2006","format":false,"excerpt":"Mi scrive oggi il support di Dreamhost dicendomi che hanno dovuto metter mano al mio db in quanto alcune tabelle (da oltre 116k recond) ne inficiavano le performance. Il problema pare dipenda da SlimStat, che quindi per un pochino disattiver\u00f2. A seguire la lettera che mi \u00e8 giunta dal support\u2026","rel":"","context":"In &quot;php&quot;","block_context":{"text":"php","link":"https:\/\/www.fullo.net\/blog\/category\/tecnologia\/php\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1494,"url":"https:\/\/www.fullo.net\/blog\/2005\/06\/27\/behaviourjs\/","url_meta":{"origin":682,"position":4},"title":"behaviour.js","author":"Francesco Fullone","date":"27\/06\/2005","format":false,"excerpt":"un ottimo esempio di libreria che semplifica la vita a tutti quelli che vogliono usare ajax (e rispettive implementazioni) senza impazzire troppo con il js all'interno del proprio codice. Behaviour is the missing link for your ajax apps. Or: Using CSS selectors to apply Javascript functionality Behaviour permette infatti di\u2026","rel":"","context":"In &quot;ajax&quot;","block_context":{"text":"ajax","link":"https:\/\/www.fullo.net\/blog\/category\/tecnologia\/ajax\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1153,"url":"https:\/\/www.fullo.net\/blog\/2004\/12\/17\/cssed\/","url_meta":{"origin":682,"position":5},"title":"CSSED","author":"Francesco Fullone","date":"17\/12\/2004","format":false,"excerpt":"siccome mi \u00e8 scaduta la trial di StyleMaster e non ho intenzione di acquistarlo, a causa di alcuni fastidiosi bug e della lentezza del programmillo sotto windows, ho cercato qualche valida alternativa... e come al solito il mondo dell'opensource \u00e8 venuto in mio soccorso! CSSED is a small developer editor\u2026","rel":"","context":"In &quot;webdev&quot;","block_context":{"text":"webdev","link":"https:\/\/www.fullo.net\/blog\/category\/tecnologia\/webdev\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.fullo.net\/blog\/wp-json\/wp\/v2\/posts\/682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fullo.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fullo.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fullo.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fullo.net\/blog\/wp-json\/wp\/v2\/comments?post=682"}],"version-history":[{"count":0,"href":"https:\/\/www.fullo.net\/blog\/wp-json\/wp\/v2\/posts\/682\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fullo.net\/blog\/wp-json\/wp\/v2\/media?parent=682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fullo.net\/blog\/wp-json\/wp\/v2\/categories?post=682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fullo.net\/blog\/wp-json\/wp\/v2\/tags?post=682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}