JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Text Boxes & Inputs › Smart text box title class
Tagged: tooltip title, tooltip ui component
- This topic has 5 replies, 3 voices, and was last updated 3 years ago by YavorDashev.
-
AuthorPosts
-
September 20, 2021 at 3:33 pm #102244tullio0106Member
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 ?
TksSeptember 22, 2021 at 5:35 am #102271adminKeymasterHi 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 #102299tullio0106MemberTks 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 ?
TksSeptember 27, 2021 at 3:54 pm #102300YavorDashevMemberHi 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 #102301tullio0106MemberHere 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 #102306YavorDashevMemberHi 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/ -
AuthorPosts
- You must be logged in to reply to this topic.