{"id":3411,"date":"2012-07-19T17:44:12","date_gmt":"2012-07-19T17:44:12","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3411"},"modified":"2012-11-05T14:37:37","modified_gmt":"2012-11-05T14:37:37","slug":"poshy-tip-jquery-plugin","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/","title":{"rendered":"Poshy Tip jQuery Plugin"},"content":{"rendered":"<p><a href=\"http:\/\/vadikom.com\/demos\/poshytip\/\" target=\"_blank\">Poshy Tip<\/a> es un plugin jQuery gratuito para la creaci\u00f3n de atractivos tooltips. Utilizarlo es de lo m\u00e1s simple, pr\u00e1cticamente no requiere modificar en nada nuestra estructura HTML ya que utiliza el atributo title, el mismo deber\u00eda estar presente en cualquier sitio que tenga c\u00f3digo valido seg\u00fan est\u00e1ndares.<\/p>\n<p>Visualmente estos tooltip son muy atractivos, sin embargo, y en caso de no estar conformes con el dise\u00f1o por defecto, podemos cambiarlo de forma muy simple por medio de hojas de estilo. En el sitio oficial pueden ver varias demostraciones de uso que utilizan distintos estilos.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/posty.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3415\" title=\"posty\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/posty.png\" alt=\"\" width=\"268\" height=\"75\" \/><\/a><\/p>\n<p>Para implementar el tooltip que aparece en la imagen anterior tan solo tendremos que bajar el plugin y a\u00f1adirlo a nuestro &lt;head&gt; junto con el estilo deseado y la librer\u00eda jQuery.<\/p>\n<pre>&lt;link rel=\"stylesheet\" href=\"src\/tip-yellow\/tip-yellow.css\" type=\"text\/css\" \/&gt;\r\n&lt;script type=\"text\/javascript\" src=\"demo\/includes\/jquery-1.4.2.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"src\/jquery.poshytip.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(function(){\r\n\u00a0\u00a0 \u00a0$('#demo-basic').poshytip();\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>Cuando descargues el plugin te dar\u00e1s cuenta que hay varios estilos que podr\u00e1s ver en la documentaci\u00f3n y ejemplos.<\/p>\n<p>En nuestro &lt;body&gt; tan solo a\u00f1adiremos:<\/p>\n<pre>&lt;a id=\"demo-basic\" title=\"Hey, there! This is a tooltip.\" href=\"#\"&gt;Hover for a tooltip&lt;\/a&gt;<\/pre>\n<p>El plugin contempla distintos aspectos b\u00e1sicos, como por ejemplo la ubicaci\u00f3n del tooltip, mediante par\u00e1metros podemos indicarle al plugin donde ubicar el tooltip en relaci\u00f3n al enlace, podemos ubicarlo a cualquiera de los lados y en pr\u00e1cticamente cualquier \u00e1ngulo.<\/p>\n<p>Un detalle importante es que tambi\u00e9n podemos utilizar este plugin con campos del tipo input, excelente para formularios en donde debemos, o deseamos, ampliar la informaci\u00f3n para ayudar al visitante en la tarea de completar el formulario en cuesti\u00f3n.<\/p>\n<p>Tambi\u00e9n permite introducir im\u00e1genes y c\u00f3digo HTML dentro del tooltip.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/poshytip\/demo\/demo.html\" target=\"_blank\">Ver m\u00e1s documentaci\u00f3n y ejemplos<\/a><\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/poshytip\/\" target=\"_blank\">Ver ejemplo simple<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Poshy Tip es un plugin jQuery gratuito para la creaci\u00f3n de atractivos tooltips. Utilizarlo es de lo m\u00e1s simple, pr\u00e1cticamente no requiere modificar en nada nuestra estructura HTML ya que utiliza el atributo title, el mismo deber\u00eda estar presente en cualquier sitio que tenga c\u00f3digo valido seg\u00fan est\u00e1ndares. Visualmente estos tooltip son muy atractivos, sin [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3415,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[70],"class_list":["post-3411","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>Poshy Tip 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=\"Poshy Tip jQuery Plugin - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Poshy Tip es un plugin jQuery gratuito para la creaci\u00f3n de atractivos tooltips. Utilizarlo es de lo m\u00e1s simple, pr\u00e1cticamente no requiere modificar en nada nuestra estructura HTML ya que utiliza el atributo title, el mismo deber\u00eda estar presente en cualquier sitio que tenga c\u00f3digo valido seg\u00fan est\u00e1ndares. Visualmente estos tooltip son muy atractivos, sin [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-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-19T17:44:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-11-05T14:37:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/posty.png\" \/>\n\t<meta property=\"og:image:width\" content=\"268\" \/>\n\t<meta property=\"og:image:height\" content=\"75\" \/>\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=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/\",\"name\":\"Poshy Tip jQuery Plugin - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/posty.png\",\"datePublished\":\"2012-07-19T17:44:12+00:00\",\"dateModified\":\"2012-11-05T14:37:37+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/posty.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/posty.png\",\"width\":268,\"height\":75},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Poshy Tip 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":"Poshy Tip 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":"Poshy Tip jQuery Plugin - Jose Aguilar Blog","og_description":"Poshy Tip es un plugin jQuery gratuito para la creaci\u00f3n de atractivos tooltips. Utilizarlo es de lo m\u00e1s simple, pr\u00e1cticamente no requiere modificar en nada nuestra estructura HTML ya que utiliza el atributo title, el mismo deber\u00eda estar presente en cualquier sitio que tenga c\u00f3digo valido seg\u00fan est\u00e1ndares. Visualmente estos tooltip son muy atractivos, sin [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-07-19T17:44:12+00:00","article_modified_time":"2012-11-05T14:37:37+00:00","og_image":[{"width":268,"height":75,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/posty.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":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/","url":"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/","name":"Poshy Tip jQuery Plugin - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/posty.png","datePublished":"2012-07-19T17:44:12+00:00","dateModified":"2012-11-05T14:37:37+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/posty.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/posty.png","width":268,"height":75},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/poshy-tip-jquery-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Poshy Tip 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\/3411","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=3411"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3411\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/3415"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}