Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #102244

    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 ?


    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


    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 ?


    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


    Here the testcase.
    Try to change the position and You’ll get all problems.
    <!DOCTYPE html>
    <html xmlns=””&gt;
    <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” />
    <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-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>


    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) {

    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.