CSS Tooltips built on Tether. #hubspot-open-source

Hi,

I tried to use Tooltip from Browserify (see #27) and got an error.

The problem is that when you do var Tooltip = require("tether-tooltip/tooltip"); it does not export Tooltip constructor but Tether constructor.

Also it would be nice to have an main/index.js entry point for the lib so that we can simply call var Tooltip = require("tether-tooltip");

It is still possible to use this lib with Browserify by accessing the global variable Tooltip. What I did in a TetherTooltip.js file:

require("tether-tooltip/tooltip");
module.exports = Tooltip;

Uncaught TypeError: Cannot read property 'classList' of null tooltip.js:1661
hasClass tooltip.js:1661
DropInstance.isOpened tooltip.js:3138
DropInstance.close tooltip.js:3176(anonymous function)

This happens sometimes

Hi!

Not sure if this is supposed to happen, but when the tooltip's target element changes position, the tooltip doesn't move with it. Here's a quick example gif:

In this example the tooltip is attached to the icon, but when the icon moves down on hover, the tooltip stays where it was. Is this a feature or just a bug?

On another note, the tooltips themselves behave kind of oddly. Here's a screenshot of a tooltip attached to the black bar, with the position set as "right middle":

While the tooltip is on the right side of the bar, it certainly isn't in the middle. It's also missing the arrow.

Let me know if you want any information about my setup in case you think this is on my end, I'll provide it gladly.

@thejameskyle Re: #50, this PR adds the role=tooltip attribute to the tooltip content element, and the aria-describedby attribute to the tooltip target.

Note that these changes require Drop v1.4.2 in order to work, due to the issue described at HubSpot/drop#134.

It would be nice to have aria-hidden as well, but that's really a change that should be made to Drop, since it's not Tooltip-specific. I'll take a crack at that later.

I need to be able to do something like data-tooltip-openOn="hover focus" for some elements.

Is there a particular reason for not having support for this?

cheers

i.e. if you want it positioned to the right of an element which is against the right-side of the page, then it should be moved to the top / bottom.

I would've assumed since this relies on Tether that this would already be a given.

I use tooltip in a special way, as I mount ReactJS components inside the tooltip.

These tooltips have buttons inside.

I was able to make it work with:

.tooltip-element.tooltip-theme-arrows {
  pointer-events: none;
  &.tooltip-hoverable {
    pointer-events: auto;
  }
}

And by adding the tooltip-hoverable class. Drop seems clever and does not close the tooltip when it's hovered.

It would be nice to add that option in default themes as well as in the tooltip API

Hi,

I've included tether (0.6.5), drop (0.2.9) and tooltip (0.2.6).

I get that error on my page:

Uncaught TypeError: Cannot read property 'close' of undefined 

any clue where it might be coming from?

Thanks

It would be awesome if this library could follow a11y best practices. Basically:

When shown:

<div aria-describedby="tooltip-1">A nice element</div>
<div id="tooltip-1" role="tooltip" aria-hidden="false">A nice tooltip</div>

When not shown:

<div aria-describedby="tooltip-1">A nice element</div>
<div id="tooltip-1" role="tooltip" aria-hidden="true">A nice tooltip</div>

Tooltip, Drop and Tether should have support for require. In my case, I don't really want those vars in the global window since it's a bad practice. I would prefer to use require and amd the three: Tooltip, Drop and Tether. From what I gather, Tether already does this.

I'll try and pull request this. The problem, from what I see, is Tether needing to access the window to get Tether or Drop. There should be some strategy like the Tether one to use whatever is available.

Correct me if I'm wrong.

I'm using Browserify with TetherTooltip. require("tether-tooltip/tooltip"); works fine to get the code.

However, Tether gives me the error Tether Error: Both element and target must be defined

Versions are:

/*! tether-tooltip 0.2.6 */
/*! tether 0.6.5 */

Notice that I have this error even with the code sample

new Tooltip({
  target: targetElement,
  position: 'top left',
  content: "My awesome <b>content</b>.",
  classes: 'my-tether-theme'
});

I see in my debugger the call to setOptions with the attributes

options: Object
  classes: "my-tether-theme"
  content: "My awesome <b>content</b>."
  position: "top left"
  target: div.space-overview-shared-with-count

So is it a bug? At least I don't understand what I am supposed to pass as element

Hi, So i came up with this issue where if the content data has JavaScript code script then its gets executed.

Examples:

const data = {
  "email": "<img src=x onerror=prompt(1)>@x.y",
  "firstName": "Sabin",
  "lastName": "Bogati"
}

<Tooltip content={JSON.stringify(data, null, 2)} className="json-tooltip">
  <span className="text-body">
    Placeholder....
  </span>
</Tooltip>

how do i disable JavaScript from executing?

I came across this by chance, while looking for a way to add tooltips to a Hubspot CMS page. I am not a developer, barely a front-end developer, and I cannot get this to work at all. I'm also completely willing to be told it's my fault.

It is worth noting that I have no idea how to use npm or bower, and am simply trying to link all the relevant js and css files on a Hubspot page to make some custom tooltips work. I've been adding in this code as per the documentation, but with no luck. I can't even get the example html (included in the ZIP file) to work, and that's after I've added in the dependent urls myself.

hello, I feel the font size of the content of tooltip is small, but I spend much time to find solution but failed, So I made a 'popover'. When I click a span element like:

<span name="explanation" class="explanation-tooltip glyphicon glyphicon-question-sign" data-container="body" data-toggle="popover" data-title="hello!" data-original-title="" title=""></span>

the 'popover' function is normal and it shows 'hello!'. But when mouse hover the above span, the 'tooltip' still shows tip:hello! So how to disable the content of tooltip when I use 'popover' ? can you give some advises. looking forward to your reply.

So, the JS is working, 'cause i see it creates a few classes when i hover the element. However, doesn't show any tooltip.

I already called tether, drop and then tooltip, as well the CSS. There's no error, just doesn't show.