Tooltips not working in HTML5 extension panel

[JSinha]

Hi,

I am trying to show some tooltip against the elements in my HTML panel. I am using the 'title' attribute for showing the tooltips. They show up when I open the HTML in a browser but are not displayed when it is opened as an extension panel in any of the Adobe apps e.g. Photoshop, Illustrator etc. I am using the CC version. Is anything amiss? Thanks in advance.

[DBarranca]

Hi,

I confirm button's tooltip as title attribute doesn't work on Photoshop (OSX) CC 2014 - it looks like a bug...

Regards

Davide Barranca

www.davidebarranca.com

www.cs-extensions.com

[JSinha]

Thanks for the confirmation David. I was wondering whether I am doing something wrong. I checked with both CC and CC 2014 versions. Doesn't seem to work with either of them.

Regards.

[slan]

Now, in theory (ntroducing CEP 5.2 – now available), it should work.. but if I write title = "This is my tooltip" in .html doesnt work

[gregbenz]

I'm not able to see it either with CEP 5.2.  Not sure what I'm missing.

[lesavage · Accepted solution]

Hi,

Tooltips currently only work on Windows. Please refer to the following link to see how to support Tooltips on Mac using JavaScript: Tooltips - jQuery CSS Tooltips - Bootstrap Tooltips

Kind regards,

Lea

[gregbenz]

HI Lea-  Thanks for the suggestion!  Are you sure it works in a Mac Photoshop extension?  I've tried the following and still don't have tooltips.

I added the CSS/JS files from the download and added the following code  to index.html:

added to header:

<link href="css/bootstrap.min.css" rel="stylesheet">

added to end of body:

<a title="Default tooltip" rel='tooltip'>Test Tooltip</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="js/bootstrap.min.js">

</script>

<script language="javascript">

$(document).ready(function(){

    $("[rel='tooltip']").tooltip();

})

</script>

[zlovatt]

If anyone's finding this later and seeing the same issue, try this for the script part:

<script language="javascript">
    jQuery("[rel='tooltip']").tooltip({container: 'body'});
</script>

Seems you need to replace $. with jQuery, and then adding {container: 'body'} will ensure that your contents don't jump when the tooltip appears.

[plug_in_guy]

Lea,

I've been able to get basic default tool-tips working in a Mac HTML panel extension (in InDesign CC 2019) but all the other features mentioned in your suggested:

Tooltips - jQuery CSS Tooltips - Bootstrap Tooltips​

don't work on the Mac. I'm specifically interested in allowing longer (more verbose) tool-tips in my small palette and the suggestion about:

.tooltip-inner {max-width: 650px; !important; }

works great on Win, but causes tool tips on the Mac to stop working altogether. Seems to me Adobe may have still not completed support for certain HTML/Javascript isms on the Mac side. Any new suggestions?

Thank you!!

Steve