Smart text box title class - Smart UI Components

Tagged: tooltip title, tooltip ui component

This topic has 5 replies, 3 voices, and was last updated 2 years, 6 months ago by YavorDashev.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
September 20, 2021 at 3:33 pm #102244

tullio0106
Member

I’m using smart textboxes.
They show the title attribute very well.
Now I need to apply the same class for titles to fixed fields (<div title=”Test”>Text</div>).
Which class should I use to obtain the same effect ?
Tks

September 22, 2021 at 5:35 am #102271

admin
Keymaster

Hi tullio0106,
The “title” is a native HTML element attribute. If you want to apply styles to tooltips, you can use our smart-tooltip component.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

September 27, 2021 at 12:55 pm #102299

tullio0106
Member

Tks for Your help.
I did it and it works fine but I’ve a problem : setting the tooltip bottom, left, or top it appears truncated on the first field, setting the tooltip bottom, right, or top it appears truncated on the last field on the row.
Setting it absolute make impossible to acces to a checkbox.
How can I solve ?
Tks

September 27, 2021 at 3:54 pm #102300

YavorDashev
Member

Hi tulion0106,
We will require a code example which reproduces this issue as when I tested the SmartTextbox component with the tooltip component I didn’t encounter the described by you behavior.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

September 27, 2021 at 4:27 pm #102301

tullio0106
Member

Here the testcase.
Try to change the position and You’ll get all problems.

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>List Box Images Demo</title>
<meta charset=”utf-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />
<link rel=”stylesheet” type=”text/css” href=”../../../source/styles/smart.default.css” />
<link rel=”stylesheet” type=”text/css” href=”../../../styles/demos.css” />
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
</head>
<body class=”viewport”>
<smart-drop-down-list selected-indexes=”[0]” selection-mode=”checkBox” id=”phoneBook”>
<smart-list-item><i class=”icon”></i>Andrew Watson</smart-list-item>
<smart-list-item><i class=”icon”></i>Anne Kean</smart-list-item>
<smart-list-item><i class=”icon”></i>Avril Janin</smart-list-item>
<smart-list-item><i class=”icon”></i>Janet Pattenson</smart-list-item>
<smart-list-item><i class=”icon”></i>Johanna Svensson</smart-list-item>
<smart-list-item><i class=”icon”></i>Johnny Abana</smart-list-item>
<smart-list-item><i class=”icon”></i>Laura Thene</smart-list-item>
<smart-list-item><i class=”icon”></i>Margaret Vetton</smart-list-item>
<smart-list-item><i class=”icon”></i>Maria Sevrano</smart-list-item>
<smart-list-item><i class=”icon”></i>Mark Yemen</smart-list-item>
<smart-list-item><i class=”icon”></i>Maya Verdara</smart-list-item>
<smart-list-item><i class=”icon”></i>Michael Barton</smart-list-item>
<smart-list-item><i class=”icon”></i>Monica Oghini</smart-list-item>
<smart-list-item><i class=”icon”></i>Nancy Queens</smart-list-item>
<smart-list-item><i class=”icon”></i>Robert Drawny</smart-list-item>
<smart-list-item><i class=”icon”></i>Steven Fedrichy</smart-list-item>
<smart-list-item><i class=”icon”></i>Toni Versachi</smart-list-item>
</smart-drop-down-list>
<smart-tooltip id=”tooltip” selector=”phoneBook” position=”bottom” arrow>La vispa teresa avea tra l’erbetta volando sorpresa gentil farfalletta</smart-tooltip>
<!– scripts –>
<script type=”module” src=”../../../source/modules/smart.dropdownlist.js”></script>
<script type=”module” src=”../../../source/modules/smart.tooltip.js”></script>
<script type=”module” src=”index.js”></script>
</body>
</html>

September 28, 2021 at 9:52 am #102306
YavorDashev
Member
Hi tullio0106,
When I tested the tooltip with the code that you have provided the tooltip appears truncated/cut when it overflowing the browser window which is expected, but when setting the position to absolute I was able to access the checkboxes for the dropdown.
However for your scenario I would suggest to set the tooltip position to absolute and add the following code snippet so that the tooltip is closed when the dropdown is opened:
```
 const dropDownList = document.querySelector('smart-drop-down-list'),
                    tooltip  = document.querySelector('smart-tooltip');
            dropDownList.addEventListener('open', () => {
                if(dropDownList.opened) {
                    tooltip.close();
                }
            });
```
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.