Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #102244
    tullio0106
    Member
    Up
    1
    Down

    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

    #102271
    admin
    Keymaster
    Up
    0
    Down

    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/

    #102299
    tullio0106
    Member
    Up
    0
    Down

    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

    #102300
    YavorDashev
    Member
    Up
    0
    Down

    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/

    #102301
    tullio0106
    Member
    Up
    0
    Down

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

    #102306
    YavorDashev
    Member
    Up
    0
    Down

    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/

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