Foundation 4 custom tooltip without pip

Question

Foundation default tooltips look like this:

I'd like to get rid of the small top triangle on parts of my website.

To get rid of it everywhere you just have to change the $tooltip-pip-size variable value to 0 from the foundation_and_overrides.scss file (also called _settings.scss if you're not using the foundation gem with rails).

Is it possible to define a custom version of the foundation tooltip without a pip?

EDIT

The difficulty here is that when I write something like

<span data-tooltip class="has-tip tip-bottom" title="Here are my tooltip contents!">extended information</span>

Foundation javascript generates a specific element at the end of the document containing the actual tooltip:

<span data-selector="tooltip8vxaud6lxr" class="tooltip tip-bottom" style="visibility: visible; display: none; top: 78px; bottom: auto; left: 50px; right: auto; width: auto;">Here are my tooltip contents!<span class="nub"></span></span>

You see that the tip-bottom class I added to the first span got copied to the second but that is only the case for foundation specific classes like tip-left, tip-right and so on.

What I would like to do is being able to add a "no-pip" class to the first span (the only one I actually write) and be able to alter the look of the generated span containing a "nub" element.

<span data-tooltip class="has-tip tip-bottom no-pip" title="Here are my tooltip contents!">extended information</span>

Answer 1

that little triangle is just span with class nub all what you need to do is to remove the css border from it then you 'll have your tool tip in the same location as normal without the little triangle

Answer 2

Just hide it by setting display property to none

.tooltip > .nub {
    display: none;
}

Answer 3

With foundation version 5 you can customize the tooltip template.

Just remove the <span class="nub"></span>:

  $(document).foundation({
    tooltip: {
      tip_template : function (selector, content) {
        return '<span data-selector="' + selector + '" class="'
          + Foundation.libs.tooltip.settings.tooltip_class.substring(1)
          + '">' + content + '<span class="nub"></span></span>';
      }
    }
  });