hubspot/tooltip

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

tooltip's Issues

Download a bundled version of the latest release

Is there a way to download latest release of the Tooltip plugin bundled with dependencies (Tether + Drop) ?

Ideally available on the official tooltip page : http://github.hubspot.com/tooltip/docs/welcome/
So everyone can easily update it.

Cheers!

Update docs on the number of themes?

https://github.com/HubSpot/tooltip/tree/master/dist/css shows two themes, But http://github.hubspot.com/tooltip/ says "Currently there is only one default theme. We will be adding more soon!".

Tooltip vs. Drop

http://github.hubspot.com/drop/overview/drop_vs_tether/ is great.

A similar page detailing how Tooltip builds upon Drop would be great too.

Investigate `Uncaught ReferenceError: Tether is not defined` in docs

Visit http://github.hubspot.com/tooltip and view the console.

@zackbloom maybe Tether isn't being bundled properly?

Animations

Awesome library, it has saved me a bunch of time than if i was to do it myself. It would be nice if you could add support for css3 animations via show/hide classes.

Docs/demo showcase doesn't display top right tooltip. Odd attachments on resize.

nice library!

On the showcase at: http://github.hubspot.com/tooltip/docs/welcome/

The "Top Right" tooltip doesn't appear until the page is scrolled after the initial animation. The other 11 tooltips are displayed correctly.

Firefox 27, Chrome 34 dev, and Chrome 34 Canary, Mac OS X 10.7.5

and you may want to change the other attachments. Resizing the browser window results in an odd layering of the tooltips. Left Bottom and Bottom Left layer over Left Top and Top Left. Right Bottom and Bottom Right go below Right Top and Top Right.

Dynamically change tooltip attachment point

Is it possible to modify a tooltip's attachment point dynamically? Case-in-point: when I resize my window size, some of my tooltips fall outside the window bounds. Can tooltips do one of two things:

(1) Listen to window size and modify their horizontal position to never fall outside the window bounds
(2) Allow me to put a resize listener (jQuery) and when the window is of a specific size, change the tooltip to a different attachment point (i.e. change 'top center' to 'top right')

Thank you.

a11y

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>

Better support for Browserify

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;

Mustn't go outside of visible viewport

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.

Automatically use theme if styles are included

Cannot read property 'classList' of null

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

Add main property/value to bower.json

Can someone please add "main": "tooltip.js" into bower.json so that wiredep can pick it up when we install it using bower install

How to custom style in CSS?

Hubspot forms

How do I apply a tooltip to a hubspot form element? If I try to put it in the label or a rich text area it tells me I added unsafe markup.

Undefined is not a function for `el.getBoundingClientRect()`

I'm seeing something really odd where I'm receiving the follow error Undefined is not a function at this line: https://github.com/HubSpot/tooltip/blob/master/tooltip.js#L102. It is happening as a result of el getting set to a #document-fragment for w/e reason. Can't seem to find the origin of the issue. I'm including Tooltip 0.6.5, setting Tooltip.autoinit = false;, and creating a tip like this:

this.tooltip = new Tooltip({
    'target': this.edit_file_upload_icon_el[0],
    'position': 'right middle'
});

No hide on mouseLeave?

Tooltips are automatically showed on hover, so I expect them to hide on mouseLeave, which is no the case for me.

Should I handle the hide manually or am I missing something?

Document that the Tooltip constructor accepts Drop constructor's options

This currently isn't discoverable without resorting to reading the source code.

Uncaught TypeError: Cannot read property 'close' of undefined

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

how to modify the font size of the content of tooltip

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.

Tooltip website has outdated example css

Hey guys, so the Tooltip website under "How to Use" still has this line:

<link rel="stylesheet" href="tooltip-theme-default.css" />

That theme is apparently not in the latest release, and looking at the docs page under usage it looks like it has been changed to:

<link rel="stylesheet" href="css/tooltip-theme-arrows.css" />

I do see that file in the release.

Default position is ignored

If the data-tooltip-position attribute is not provided on an element, the default position will not be applied. In this case, options.position is assigned null which overrides the default position in the extend call.

Support for require

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.

typo in destroy function

Line 52: tooltip.js
Tooltip.prototype.destory = function() {
return this.drop.destroy();
};

Support tooltips that we can hover

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

Add a Tooltip constructor option to change drop's classPrefix

If bootstrap and tether tooltip are both loaded (yeah, yeah, these things happen...), bootstrap will apply its .tooltip style to tether's drop element - mainly opacity: 0.
Since I didn't see any tether styles applied with .tooltip I just removed the class with javascript and it seems to work.

No way to dismiss a tooltip on touch devices

On an iOS or other touch device, where hover events are triggered after a click, there does not appear to be way to get the tooltips to dismiss.

Error if target not attached to DOM at the time of Tooltip creation

If the target element is not attached to DOM at the time of Tooltip creation, later (when the element is attached and visible), on hover, the following error shows up:

Uncaught TypeError: el.getBoundingClientRect is not a function

In my scenario, I am creating an element in a callback (attaching Tooltip to it) that is later appended to DOM. This results in the the error shown above.

Is there a workaround?

Versions
Tooltip: 1.2.0
Drop: 1.4.2
Tether: 1.2.0

Stack
getBounds @ tether.js:121
(anonymous function) @ tether.js:1255
getBoundingRect @ tether.js:1269
(anonymous function) @ tether.js:1357
position @ tether.js:1335
position @ tether.js:954
enable @ tether.js:812
open @ drop.js:428
(anonymous function) @ drop.js:366

when I open a tooltip on mobile (ios), there is a shake for instant

Javascript gets executed when the tooltip content has javascript script

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?

Docs Demo Broken

Tooltip never pops up, it appears to be due to these JS Errors.

Inserting elements with data-tooltip attributes does nothing.

You have to manually create the Tooltip. This should at least be mentioned in the docs.

Naming conflict with Bootstrap 4-alpha

Just a heads up that Bootstrap 4 has a .tooltip CSS class of its own that conflicts with tether-tooltip's. The net effect is tooltips not displaying with no discernible error. I tracked it down to the opacity being forced to 0 by Bootstrap. Easy CSS fixes from there, but an extra 20-40 minutes of tinkering to figure it out.

Update published version on npm

Curious if you intend to continue publishing to the npm registry. I'm hitting some issues with the current published version (v0.2.1) that look to be fixed by recent changes.

Tooltips not working, possible rookie issue

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.

Tether Error: Both element and target must be defined

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

Update documentation

Update documentations to reflect v1.0.x. Also update build steps to build new documentations.

Bower installation? Registry name?

Nice looking component. I could not find it in the registry though, "bower install tooltip" installs something else entirely. What would be the right name? Thanks

Tooltips not displaying in Flexslider

The classes are being added to the body and to the code just before the closing tag but the 'tooltip-enabled' class isn't being added to the element when I hover over it.

Any ideas?

Documentation not up to date

Tooltip seems to require Drop but it is not explained in the documentation. Am I right?

Position attribute mandatory

Your documentation claims the position attribute is optional but if you miss it then the script fails to render the tooltip.

Tooltip doesn't show

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.

Updating tooltip position when target moves

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.

more explicit instruction for how to use this with npm + webpack/browserify

Hey there,

I'd love it if there were a clear set of steps somewhere in the docs or readme for how to install and use this tool if using webpack/browserify. Here's what I think it needs:

npm i -S tether-tooltip

// in index.js
var Tooltip = require('tether-tooltip')
// or if just using the html data-tooltip attributes:
require('tether-tooltip')

//optionally create tooltips manually
let tooltipInstance = new Tooltip({
  target: document.querySelector('.tooltip-target'),
  content: "My awesome <b>content</b>.",
  classes: 'tooltip-tether-arrows',
  position: 'top left'
})
// or elsewhere in html: (I'm not sure if this will work..)
<a href=# data-tooltip="Weeeeee" data-tooltip-position="top center">I'm a link!</a>

I'm not sure if the above will work or not. Please correct me if I'm doing something wrong.

Thanks!

Delay

A delay option would be nice to only show the tooltip after a certain period of time has passed hovering over an element.

Examples doesn't work

I downloaded this repository and its examples doesn't work.

Specify classes / theme for data-tooltip=""

Hi,

I was wondering how one would specify what theme should be used? I don't want to create a new Tooltip() for each tooltip on the page, is there any way I can change the default options without creating new Tooltip instances?

Thanks

position vs. attach

The docs initialize the tooltip with position: 'top left', then go on to say

When initializing, you may set the attach property.

Could the distinction between the two be clarified? Could combinations of position and attach cause the tooltip to overalp the target, as if tether attachment and targetAttachment were used directly?