{"id":4451,"date":"2012-09-06T20:45:34","date_gmt":"2012-09-06T20:45:34","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=4451"},"modified":"2012-11-05T14:34:38","modified_gmt":"2012-11-05T14:34:38","slug":"cluetip-jquery-tooltip-plugin","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/","title":{"rendered":"clueTip jQuery Tooltip Plugin"},"content":{"rendered":"<p>El plugin clueTip te permite mostrar f\u00e1cilmente la informaci\u00f3n que desees de un link, bot\u00f3n o cualquier elemento HTML tras pasar el cursor del rat\u00f3n por encima de ellos. Tambi\u00e9n permite la opci\u00f3n de pulsar para ver dicha informaci\u00f3n. Si el elemento tiene el atributo title establecido, su contenido se convertir\u00e1 en el encabezado del clueTip Tooltip.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/clue.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4622\" title=\"clue\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/clue.png\" alt=\"\" width=\"774\" height=\"418\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/clue.png 774w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/clue-300x162.png 300w\" sizes=\"auto, (max-width: 774px) 100vw, 774px\" \/><\/a><\/p>\n<p>Para disponer de este maravilloso plugin necesitaremos <a href=\"https:\/\/github.com\/kswedberg\/jquery-cluetip\" target=\"_blank\">descargarlo<\/a> e incluir en el &lt;head&gt; los estilos necesarios, la librer\u00eda jQuery, el plugin y su llamada.<\/p>\n<pre>&lt;link rel=\"stylesheet\" href=\"jquery.cluetip.css\" type=\"text\/css\" \/&gt;\r\n&lt;script src=\"..\/jquery.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"jquery.cluetip.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function() {\r\n\u00a0 $('a.jt:eq(0)').cluetip({\r\n\u00a0\u00a0 \u00a0\u00a0 cluetipClass: 'jtip', \r\n\u00a0\u00a0 \u00a0\u00a0 arrows: true, \r\n\u00a0\u00a0 \u00a0\u00a0 dropShadow: false,\r\n\u00a0\u00a0 \u00a0\u00a0 hoverIntent: false,\r\n\u00a0\u00a0 \u00a0\u00a0 sticky: true,\r\n\u00a0\u00a0 \u00a0\u00a0 cursor: 'pointer',\r\n\u00a0\u00a0 \u00a0\u00a0 mouseOutClose: true,\r\n\u00a0\u00a0 \u00a0\u00a0 closePosition: 'title',\r\n\u00a0\u00a0 \u00a0\u00a0 closeText: '&lt;img src=\"demo\/cross.png\" alt=\"close\" \/&gt;'\r\n\u00a0\u00a0 \u00a0});\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>Y luego en el &lt;body&gt; de la p\u00e1gina tendremos que crear un link como el siguiente:<\/p>\n<pre>&lt;a class=\"jt\" href=\"contentip.html\" rel=\"contentip.html\" title=\"Lorem Ipsum!\"&gt;Lorem Ipsum&lt;\/a&gt;<\/pre>\n<p>El archivo que estamos incluyendo dentro de las etiquetas \u00abhref\u00bb y \u00abrel\u00bb puede ser un archivo HTML o PHP con elementos HTML, ya sean im\u00e1genes, tablas, contendores, etc.<\/p>\n<p>El plugin tiene innumerables opciones que puedes revisar <a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/cluetip\/\" target=\"_blank\">aqu\u00ed<\/a>.<\/p>\n<p>El tooltip es personalizable a trav\u00e9s de su hoja de estilos CSS y puedes utilizar varios en la misma p\u00e1gina.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/cluetip\/example.html\" target=\"_blank\">Ver el ejemplo en funcionamiento<\/a><\/p>\n<p>Puedes ver m\u00e1s ejemplos y su implementaci\u00f3n <a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/cluetip\/demo\/test-demo.html\" target=\"_blank\">aqu\u00ed<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El plugin clueTip te permite mostrar f\u00e1cilmente la informaci\u00f3n que desees de un link, bot\u00f3n o cualquier elemento HTML tras pasar el cursor del rat\u00f3n por encima de ellos. Tambi\u00e9n permite la opci\u00f3n de pulsar para ver dicha informaci\u00f3n. Si el elemento tiene el atributo title establecido, su contenido se convertir\u00e1 en el encabezado del [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4622,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[70],"class_list":["post-4451","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-tooltips"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>clueTip jQuery Tooltip Plugin - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"clueTip jQuery Tooltip Plugin - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"El plugin clueTip te permite mostrar f\u00e1cilmente la informaci\u00f3n que desees de un link, bot\u00f3n o cualquier elemento HTML tras pasar el cursor del rat\u00f3n por encima de ellos. Tambi\u00e9n permite la opci\u00f3n de pulsar para ver dicha informaci\u00f3n. Si el elemento tiene el atributo title establecido, su contenido se convertir\u00e1 en el encabezado del [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-09-06T20:45:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-11-05T14:34:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/clue.png\" \/>\n\t<meta property=\"og:image:width\" content=\"774\" \/>\n\t<meta property=\"og:image:height\" content=\"418\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/\",\"name\":\"clueTip jQuery Tooltip Plugin - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/clue.png\",\"datePublished\":\"2012-09-06T20:45:34+00:00\",\"dateModified\":\"2012-11-05T14:34:38+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/clue.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/clue.png\",\"width\":774,\"height\":418},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"clueTip jQuery Tooltip Plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"clueTip jQuery Tooltip Plugin - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"clueTip jQuery Tooltip Plugin - Jose Aguilar Blog","og_description":"El plugin clueTip te permite mostrar f\u00e1cilmente la informaci\u00f3n que desees de un link, bot\u00f3n o cualquier elemento HTML tras pasar el cursor del rat\u00f3n por encima de ellos. Tambi\u00e9n permite la opci\u00f3n de pulsar para ver dicha informaci\u00f3n. Si el elemento tiene el atributo title establecido, su contenido se convertir\u00e1 en el encabezado del [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-09-06T20:45:34+00:00","article_modified_time":"2012-11-05T14:34:38+00:00","og_image":[{"width":774,"height":418,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/clue.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/","url":"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/","name":"clueTip jQuery Tooltip Plugin - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/clue.png","datePublished":"2012-09-06T20:45:34+00:00","dateModified":"2012-11-05T14:34:38+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/clue.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/clue.png","width":774,"height":418},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/cluetip-jquery-tooltip-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"clueTip jQuery Tooltip Plugin"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/4451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=4451"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/4451\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4622"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=4451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=4451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=4451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}