Tocas: [Feature request] Tooltips for elements?

[toby3d]

How about adding support for tooltips for all elements with control by sides, speed and/or animation?
Like this:

[YamiOdymel]

I hope you can read the fully content below and see if you got any clues or answers.

Problems

I tried it and removed it before, because it's not mobile-friendly, and there's something other I've also considered.

1. Mobile-_unfriendly_

For example that there's no hover event on the mobile, so you will need to press the icon to show the tooltip, and then you will need to press the page (_anywhere, just not the icon_) to close the tooltip, which is a little bit verbose.

And sometimes the tooltip just overflows, or it blocks the element which is below the tooltip, this is the FIRST problem, I don't like to add an element that can only be used on the desktop devices, but we can still considering to add it to Tocas UI.

2. How to create the tooltips

This is also another thing makes me considering to add the tooltip to Tocas UI or not, just check out the tooltips element of Semantic UI and you will see this:

_Happy halloween, the example above scares me_, The way to store the content of the tooltip is the SECOND problem, but I've got some thoughts about this.

A. Create a .ts.tooltip HTML element

This way makes the tooltip can be customize easily, and the code is easy to read.

<button class="ts button">
    Create
    <span class="ts tooltip">Hello, world!</span>
</button>

<!-- Or like this -->
<button class="ts button">
    Create
    <span class="ts rounded positive small tooltip">Hello, world!</span>
</button>
<!-- / Or like this -->

B. Put the tooltip content into the title="" attribute

This one is more semantic and easier, but it's not highly customizable, I have no idea how do I display the tooltip in this way 🙃, and it doesn't support the HTML content which might be painful.

<button class="ts button" title="Hello, world!">
    Create
</button>

Any thoughts?

Replacement

I will recommend you to use jQuery PowerTip at least now, before the tooltip has been added to Tocas UI.

[toby3d]

@YamiOdymel I understand your problem. But these problems can be solved, if you restrict workspace tooltips and align them on the basis of this text and put the tooltips in a separate parameter tag.
For example: <a class="tooltipped" data-tooltip="I am tooltip">simple link</a>

I watched their flawless performance here (you can see javascript here), perhaps in the future you will be able to integrate a similar support. :blush:

[YamiOdymel]

Yeah, I might add it once I have the time, and I will also consider the
wrapper which you mentioned before.

2016年10月31日 上午8:24，"Maxim Lebedev" [email protected]寫道：

I understand your problem. But these problems can be solved, if you
restrict workspace tooltips and align them on the basis of this text and
put the tooltips in a separate parameter tag.

[image: image]
https://cloud.githubusercontent.com/assets/5412322/19841226/d36a6286-9f29-11e6-8867-7f5fb69b9cc4.png
I watched their flawless performance here
http://materializecss.com/dialogs.html#tooltip (for example, you can see
javascript here
https://github.com/Dogfalo/materialize/blob/master/js/tooltip.js),
perhaps in the future you will be able to integrate a similar support. 😊

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
https://github.com/TeaMeow/TocasUI/issues/123#issuecomment-257191490,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AG-FrppeQY4OulnzAKxXzs1X8U2_cwS6ks5q5TU4gaJpZM4KkeJ6
.

[YamiOdymel]

Working on this recently (not done yet), and there will be no animation nor the speed settings (_fade-in-out as default_), only position settings, because I want to avoid to use JavaScript as well, and I am trying to make it like a _mouse tooltip_.

---

Confirmed Usage

<button class="ts button" data-tooltip="將文件送至印表機列印">
    列印
</button>

Confirmed Position Usage

<button class="ts button" data-tooltip="將文件送至印表機列印"
                          data-tooltip-position="top right">
    列印
</button>

UNCONFIRMED .untooltipped Class

The .untooltippedclass disabled the tooltip of Tocas UI, this is for those people who are using jQuery tooltip plugins already, because the data-tooltip might be conflicted with the plugins.

<button class="ts untooltipped button" data-tooltip="將文件送至印表機列印">
    列印
</button>

[YamiOdymel]

90% Finished on this, I've also added some new attributes for the tooltip.

---

[data-tooltip-delay]

The delay for the tooltip to appear.

0.1, 0.2, 0.3, 0.4, 0.5, 1, 2, 3, 4, 5, disabled, (blank)

 

[data-tooltip-width]

The width of the tooltip.

very narrow, narrow, wide, very wide, (blank)

 

[data-tooltip-type]

The type/style of the tooltip.

tag, (blank)

 

[data-tooltip-position]

The position of the tooltip.

left, right, top left, top center, top right, bottom left, bottom center, bottom right, (blank)

[YamiOdymel]

Finished at @78479c9dbdcc3252f3a9958a2e11f46310bce3bc

[YamiOdymel]

Added in Tocas 2.1 and released.

http://tocas-ui.com/modules/popup/

https://github.com/TeaMeow/TocasUI/releases/tag/v2.1.0