{"id":3530,"date":"2012-07-24T19:42:30","date_gmt":"2012-07-24T19:42:30","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3530"},"modified":"2019-04-08T10:13:33","modified_gmt":"2019-04-08T10:13:33","slug":"qtip-jquery-plugin","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/","title":{"rendered":"qTip jQuery Plugin"},"content":{"rendered":"

\"\"<\/a>Qtip es un plugin jQuery para mostrar informaci\u00f3n extra sobre links, lo que se suele denominar como tooltips.<\/p>\n

Ha sido construido a partir de cero para ser f\u00e1cil de usar, sin embargo, es rico en caracter\u00edsticas, Qtip proporciona una infinidad de opciones, como esquinas redondedas, tama\u00f1o, color del texto, fondo, etc.<\/p>\n

Implementarlo en tu Web es muy sencillo, tan solo tienes que descargar el plugin junto con la librer\u00eda jQuery y la llamada al plugin con las opciones que necesites:<\/p>\n

<script type=\"text\/javascript\" src=\"..\/jquery.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"jquery.qtip-1.0.0-rc3.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function(){\r\n\u00a0\u00a0 \u00a0$(\".example\").qtip({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 content: 'Contenido del tooltip!',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 position: {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 corner: {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 target: 'topMiddle',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 tooltip: 'bottomLeft'\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 }\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 style: { \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 width: 200,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 padding: 5,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 background: '#A2D959',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 color: 'white',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 textAlign: 'center',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 border: {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 width: 7,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 radius: 5,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 color: '#A2D959'\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 },\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 tip: 'bottomLeft'\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0 \u00a0});\r\n});\r\n<\/script><\/pre>\n
Y luego en <body> de la p\u00e1gina tendremos el link con class=\u00bbexample\u00bb:<\/p>\n
<a href=\"#\" class=\"example\">Hover over me to see an example<\/a><\/pre>\n
que tras pasar el bot\u00f3n por encima aparecer\u00e1 el tooltip.<\/p>\n
\"\"Ver m\u00e1s documentaci\u00f3n<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n
Ver ejemplo tooltip by click<\/a><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Qtip es un plugin jQuery para mostrar informaci\u00f3n extra sobre links, lo que se suele denominar como tooltips. Ha sido construido a partir de cero para ser f\u00e1cil de usar, sin embargo, es rico en caracter\u00edsticas, Qtip proporciona una infinidad de opciones, como esquinas redondedas, tama\u00f1o, color del texto, fondo, etc. Implementarlo en tu Web […]<\/p>\n","protected":false},"author":1,"featured_media":3564,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[70],"class_list":["post-3530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-tooltips"],"yoast_head":"\nqTip jQuery 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=\"qTip jQuery Plugin - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Qtip es un plugin jQuery para mostrar informaci\u00f3n extra sobre links, lo que se suele denominar como tooltips. Ha sido construido a partir de cero para ser f\u00e1cil de usar, sin embargo, es rico en caracter\u00edsticas, Qtip proporciona una infinidad de opciones, como esquinas redondedas, tama\u00f1o, color del texto, fondo, etc. Implementarlo en tu Web […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-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-07-24T19:42:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-08T10:13:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/qtip-jquery-plugin.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"315\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\/qtip-jquery-plugin\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/\",\"name\":\"qTip jQuery Plugin - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/qtip-jquery-plugin.jpg\",\"datePublished\":\"2012-07-24T19:42:30+00:00\",\"dateModified\":\"2019-04-08T10:13:33+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/qtip-jquery-plugin.jpg\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/qtip-jquery-plugin.jpg\",\"width\":315,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"qTip jQuery 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":"qTip jQuery 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":"qTip jQuery Plugin - Jose Aguilar Blog","og_description":"Qtip es un plugin jQuery para mostrar informaci\u00f3n extra sobre links, lo que se suele denominar como tooltips. Ha sido construido a partir de cero para ser f\u00e1cil de usar, sin embargo, es rico en caracter\u00edsticas, Qtip proporciona una infinidad de opciones, como esquinas redondedas, tama\u00f1o, color del texto, fondo, etc. Implementarlo en tu Web […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-07-24T19:42:30+00:00","article_modified_time":"2019-04-08T10:13:33+00:00","og_image":[{"width":315,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/qtip-jquery-plugin.jpg","type":"image\/jpeg"}],"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\/qtip-jquery-plugin\/","url":"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/","name":"qTip jQuery Plugin - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/qtip-jquery-plugin.jpg","datePublished":"2012-07-24T19:42:30+00:00","dateModified":"2019-04-08T10:13:33+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/qtip-jquery-plugin.jpg","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/qtip-jquery-plugin.jpg","width":315,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/qtip-jquery-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"qTip jQuery 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\/3530","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=3530"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3530\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/3564"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}