Theme features

All Gavick themes advertise typography in the theme features. One thing I have not yet discoved in all themes are the tooltips.

Custom Typography
Add style and pizzazz with our built-in typography features: code listings, quotes, text blocks with icons, tooltips, and more.

It would be helpful if the shortcode button could insert tooltips and the Bluap theme can use tooltips

One of the WP themes that has tooltips displayed is Startup:http://demo.gavick.com/joomla25/startup/index.php/typography
I've tried copying over the tooltip styles to override.css, but this is nog the ideal siuation...

Hi,

Most of the WP themes support tooltips, i'll check why Bluap doesn't.
For now, you can copy this code to css/shortcode.elements.css file: (or override.css)

Code: Select all

/* Tooltips */
.gk-tooltip {
   position: relative;
}

.gk-tooltip dfn {
   background: #fff;
   border: 1px solid #e5e5e5;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   left:-9999px;
   padding: 5px;
   position: absolute;
   bottom: 24px;
   width: 300px;
   word-wrap: break-word;
}

.gk-tooltip:hover dfn {
   left: 50%;
   margin-left:-150px;
}

.gk-tooltip[data-style="style2"] dfn {
   background-color: #fcf8e5;
   border-color: #efecc5;
   color: #c0b136;
}

.gk-tooltip[data-style="style3"] dfn {
   background-color: #D9EDF7;
   border-color: #BCE8F1;
   color: #3A87AD;   
}

.gk-tooltip[data-style="style4"] dfn {
   background-color: #F2DEDE;
   border-color: #EED3D7;
   color: #B94A48;
}

and this fragment to gavern/config/shortcodes.js (e.g. from line 202 - before Other typography elements)

Code: Select all

{
      "title": "Tooltips",
      "code": "[tip label=\"Label\"]Text of the tooltip[/tip]",
      "submenu": [
         {
            "title": "Link with tooltip - style 1",
            "code": "[tip label=\"Label\" style=\"1\" href=\"URL\"]Text of the tooltip[/tip]"
         },
         {
            "title": "Link with tooltip - style 2",
            "code": "[tip label=\"Label\" style=\"2\" href=\"URL\"]Text of the tooltip[/tip]"
         },
         {
            "title": "Link with tooltip - style 3",
            "code": "[tip label=\"Label\" style=\"3\" href=\"URL\"]Text of the tooltip[/tip]"
         },
         {
            "title": "Link with tooltip - style 4",
            "code": "[tip label=\"Label\" style=\"4\" href=\"URL\"]Text of the tooltip[/tip]"
         },
         {
            "title": "Link with tooltip - style 5",
            "code": "[tip label=\"Label\" style=\"5\" href=\"URL\"]Text of the tooltip[/tip]"
         },
         {
            "title": "Text with tooltip - style 1",
            "code": "[tip label=\"Label\" style=\"1\"]Text of the tooltip[/tip]"
         },
         {
            "title": "Text with tooltip - style 2",
            "code": "[tip label=\"Label\" style=\"2\" href=\"URL\"]Text of the tooltip[/tip]"
         },
         {
            "title": "Text with tooltip - style 3",
            "code": "[tip label=\"Label\" style=\"3\"]Text of the tooltip[/tip]"
         },
         {
            "title": "Text with tooltip - style 4",
            "code": "[tip label=\"Label\" style=\"4\" href=\"URL\"]Text of the tooltip[/tip]"
         }
      ]
   },