locked
Fixed positioned DIV/Panel With dynamic text on right side of the controls RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    I have a requirement. I have a form with some controls. Whenever user jump to another control it shows a detailed tool-tip on right side. See the image below.

    Now, I want this like if I have a fixed positioned panel/div (any control having related text to control) on the right side.

    And as user jumps to next control it changes the text according.

    I need just a idea? Or it will be more helpful if anyone of you share some sample links.

    Its like a a user filling the form and he is getting the idea of every control or you can say a helping text in detailed.

    Thanks. 

    Monday, March 25, 2019 11:13 AM

Answers

  • User839733648 posted

    Hi demoninside9,

    According to your description, I suggest that you could use pure css to create something like tooltip.

    Here is a sample code.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .tooltip {
                ;
                display: inline-block;
                border-bottom: 1px dotted black;
            }
    
                .tooltip .tooltiptext {
                    visibility: hidden;
                    width: 120px;
                    background-color: black;
                    color: #fff;
                    text-align: center;
                    border-radius: 6px;
                    padding: 5px 0;
                    ;
                    z-index: 1;
                    top: -5px;
                    left: 110%;
                }
    
                    .tooltip .tooltiptext::after {
                        content: "";
                        ;
                        top: 50%;
                        right: 100%;
                        margin-top: -5px;
                        border-width: 5px;
                        border-style: solid;
                        border-color: transparent black transparent transparent;
                    }
    
                .tooltip:hover .tooltiptext {
                    visibility: visible;
                }
        </style>
    </head>
    <body>
        <div class="tooltip">
            Hover over me
            <span class="tooltiptext">Tooltip text</span>
        </div>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 26, 2019 2:51 AM

All replies

  • User475983607 posted

    Now, I want this like if I have a fixed positioned panel/div (any control having related text to control) on the right side.

    And as user jumps to next control it changes the text according.

    I need just a idea? Or it will be more helpful if anyone of you share some sample links

    Bootstrap has tooltips as well as jQuery plugins.

    Monday, March 25, 2019 11:51 AM
  • User839733648 posted

    Hi demoninside9,

    According to your description, I suggest that you could use pure css to create something like tooltip.

    Here is a sample code.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .tooltip {
                ;
                display: inline-block;
                border-bottom: 1px dotted black;
            }
    
                .tooltip .tooltiptext {
                    visibility: hidden;
                    width: 120px;
                    background-color: black;
                    color: #fff;
                    text-align: center;
                    border-radius: 6px;
                    padding: 5px 0;
                    ;
                    z-index: 1;
                    top: -5px;
                    left: 110%;
                }
    
                    .tooltip .tooltiptext::after {
                        content: "";
                        ;
                        top: 50%;
                        right: 100%;
                        margin-top: -5px;
                        border-width: 5px;
                        border-style: solid;
                        border-color: transparent black transparent transparent;
                    }
    
                .tooltip:hover .tooltiptext {
                    visibility: visible;
                }
        </style>
    </head>
    <body>
        <div class="tooltip">
            Hover over me
            <span class="tooltiptext">Tooltip text</span>
        </div>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 26, 2019 2:51 AM