Questions regarding tooltiops

[zemian]

Here are few cases where I can't get the tooltips to work. Are these not supported or bugs?

1. Shows tooltips when hover over an input text:

        <div class="input-control">
          <label>Search</label>
          <input type="text" placeholder="Enter search term" class="tooltip tooltip-bottom" data-tooltip="Hey there!">
        </div>

2. Shows tooltips on either label or input text (in another word, show it whenever I hover over the field area):

      <div class="input-control" class="tooltip tooltip-bottom" data-tooltip="Hey there!">
        <label>Search</label>
        <input type="text" placeholder="Enter search term">
      </div>

3. Shows html content (larger text) in tooltips:

<button class="btn-primary tooltip" data-tooltip="<h1>Hi</h1><p>Line1</p><p>Line2</p>">Button 1</button>

[MacFJA]

1. Shows tooltips when hover over an input text:
2. Shows tooltips on either label or input text (in another word, show it whenever I hover over the field area):

You have an improper use of the class input-control. This class is for adding elements into the <input> like this:

<div class="input-control">
    <input class="input-contains-icon" type="text" placeholder="Enter search term">
    <span class="icon">🔍</span>
</div>

(Doc: https://www.cirrus-ui.com/forms/glyphs)

---

1. Shows tooltips when hover over an input text:
2. Shows tooltips on either label or input text (in another word, show it whenever I hover over the field area):

You have a typo on one of the classes: it's tooltip--bottom (instead of tooltip-bottom)

---

1. Shows tooltips when hover over an input text:

With the correct usage of input-control, it's works well:

<label>Search</label>
<div class="input-control tooltip tooltip--bottom" data-tooltip="Hey there!">
    <input type="text" placeholder="Enter search term">
</div>

---

2. Shows tooltips on either label or input text (in another word, show it whenever I hover over the field area):

You have a "syntax" error: you can't have multiple class attribute

<!-- improper use of input-control + typo in tooltip direction -->
<div class="input-control tooltip tooltip-bottom" data-tooltip="Hey there!">
   <label>Search</label>
   <input type="text" placeholder="Enter search term">
</div>

To have the same rendering:

<div class="tooltip tooltip--bottom" data-tooltip="Hey there!">
   <label>Search</label>
   <div class="input-control"><input type="text" placeholder="Enter search term">
</div>

---

3. Shows html content (larger text) in tooltips:

Tooltip can only contain RAW text

If you want more complex data, you should try to look at the dropdown feature

---

(All the code have been tested on the Cirrus playground)

[zemian]

Ah, you are correct that I have typo and mis-usage on these. Thanks for pointing them out! I will close the issue.

[zemian]

Hm... wait, dropdown is not same as Tooltips, and I have seen a need on larger text display of tooltips (or just displaying something fancy as tooltips using CSS and html is a need). @Spiderpig86 Would you guys consider adding that as feature? Would you like me to create a separate feature request?