{"id":3540,"date":"2012-07-30T20:19:51","date_gmt":"2012-07-30T20:19:51","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3540"},"modified":"2013-01-14T14:09:09","modified_gmt":"2013-01-14T14:09:09","slug":"tiptip-jquery-plugin","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/","title":{"rendered":"TipTip jQuery Plugin"},"content":{"rendered":"<p>TipTip es un plugin jQuery que nos cambia los titles de los elementos para mostrarlos de forma personalizada al estilo tooltip.<\/p>\n<p>TipTip utiliza el atributo title para mostrar el contenido del tooltip al igual que lo hace un navegador pero con un estilo personalizable. Sin embargo, el t\u00edtulo va a ser copiado y luego se retira del elemento cuando se utiliza TipTip para que la informaci\u00f3n depositada en el title del elemento se muestre con el estilo invocado.<\/p>\n<p>Todos los elementos HTML que dispongan del atributo \u00abtitle\u00bb podr\u00e1n disponer de esta funcionalidad. Por ejemplo, los links y im\u00e1genes.<\/p>\n<p>Para utilizarlo en nuestra p\u00e1gina Web deberemos descargar el plugin e incorporarlo en vuestro servidor, a\u00f1adirlo en el &lt;head&gt; junto con la librer\u00eda jQuery y su llamada, adem\u00e1s de los estilos necesarios.<\/p>\n<pre>&lt;link rel=\"stylesheet\" href=\"tipTip.css\" type=\"text\/css\" \/&gt;\r\n&lt;script type=\"text\/javascript\" src=\"..\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"jquery.tipTip.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(function(){\r\n\u00a0\u00a0 \u00a0$(\".tiptip\").tipTip();\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>Ahora todos los elementos que dispongan de title y tengan como class=\u00bbtiptip\u00bb se les aparecer\u00e1 un tooltip con estilo.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/tiptip.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3663\" title=\"tiptip\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/tiptip.png\" alt=\"\" width=\"236\" height=\"106\" \/><\/a>Es totalmente personalizable utilizando CSS.<\/p>\n<p>TipTip ha sido probado (y funciona) en: IE7 y IE8, Firefox, Safari, Opera y Chrome.<\/p>\n<p>Opciones:<\/p>\n<ul>\n<li><strong>activation<\/strong>: <strong>string (\u00abhover\u00bb by default)<\/strong> &#8211; jQuery method TipTip is activated with. Can be set to: \u00abhover\u00bb, \u00abfocus\u00bb or \u00abclick\u00bb.<\/li>\n<li><strong>keepAlive<\/strong>: <strong>true of false (false by default)<\/strong> &#8211; When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.<\/li>\n<li><strong>maxWidth<\/strong>: <strong>string (\u00ab200px\u00bb by default)<\/strong> &#8211; CSS <code>max-width<\/code> property for the TipTip element. This is a string so you can apply a percentage rule or &#8216;auto&#8217;.<\/li>\n<li><strong>edgeOffset<\/strong>: <strong>number (3 by default)<\/strong> &#8211; Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.<\/li>\n<li><strong>defaultPosition<\/strong>: <strong>string (\u00abbottom\u00bb by default)<\/strong> &#8211; Default orientation TipTip should show up as. You can set it to: \u00abtop\u00bb, \u00abbottom\u00bb, \u00ableft\u00bb or \u00abright\u00bb.<\/li>\n<li><strong>delay<\/strong>: <strong>number (400 by default)<\/strong> &#8211; Number of milliseconds to delay before showing the TipTip popup after you <code>mouseover<\/code> an element with TipTip applied to it.<\/li>\n<li><strong>fadeIn<\/strong>: <strong>number (200 by default)<\/strong> &#8211; Speed at which the TipTip popup will fade into view.<\/li>\n<li><strong>fadeOut<\/strong>: <strong>number (200 by default)<\/strong> &#8211; Speed at which the TipTip popup will fade out of view.<\/li>\n<li><strong>attribute<\/strong>: <strong>string (\u00abtitle\u00bb by default)<\/strong> &#8211; HTML attribute that TipTip should pull it&#8217;s content from.<\/li>\n<li><strong>content<\/strong>: <strong>string (false by default)<\/strong> &#8211; HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.<\/li>\n<li><strong>enter<\/strong>: <strong>callback function<\/strong> &#8211; Custom function that is run each time you <code>mouseover<\/code> an element with TipTip applied to it.<\/li>\n<li><strong>exit<\/strong>: <strong>callback function<\/strong> &#8211; Custom function that is run each time you <code>mouseout<\/code> of an element with TipTip applied to it.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/tiptip\/\" target=\"_blank\">Ver el ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>TipTip es un plugin jQuery que nos cambia los titles de los elementos para mostrarlos de forma personalizada al estilo tooltip. TipTip utiliza el atributo title para mostrar el contenido del tooltip al igual que lo hace un navegador pero con un estilo personalizable. Sin embargo, el t\u00edtulo va a ser copiado y luego se [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3663,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[70],"class_list":["post-3540","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>TipTip 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=\"TipTip jQuery Plugin - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"TipTip es un plugin jQuery que nos cambia los titles de los elementos para mostrarlos de forma personalizada al estilo tooltip. TipTip utiliza el atributo title para mostrar el contenido del tooltip al igual que lo hace un navegador pero con un estilo personalizable. Sin embargo, el t\u00edtulo va a ser copiado y luego se [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/tiptip-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-30T20:19:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-01-14T14:09:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/tiptip.png\" \/>\n\t<meta property=\"og:image:width\" content=\"236\" \/>\n\t<meta property=\"og:image:height\" content=\"106\" \/>\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\/tiptip-jquery-plugin\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/\",\"name\":\"TipTip jQuery Plugin - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/tiptip.png\",\"datePublished\":\"2012-07-30T20:19:51+00:00\",\"dateModified\":\"2013-01-14T14:09:09+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/tiptip.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/tiptip.png\",\"width\":236,\"height\":106},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"TipTip 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":"TipTip 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":"TipTip jQuery Plugin - Jose Aguilar Blog","og_description":"TipTip es un plugin jQuery que nos cambia los titles de los elementos para mostrarlos de forma personalizada al estilo tooltip. TipTip utiliza el atributo title para mostrar el contenido del tooltip al igual que lo hace un navegador pero con un estilo personalizable. Sin embargo, el t\u00edtulo va a ser copiado y luego se [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-07-30T20:19:51+00:00","article_modified_time":"2013-01-14T14:09:09+00:00","og_image":[{"width":236,"height":106,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/tiptip.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\/tiptip-jquery-plugin\/","url":"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/","name":"TipTip jQuery Plugin - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/tiptip.png","datePublished":"2012-07-30T20:19:51+00:00","dateModified":"2013-01-14T14:09:09+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/tiptip.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/tiptip.png","width":236,"height":106},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/tiptip-jquery-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"TipTip 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\/3540","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=3540"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3540\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/3663"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}