Remove From My Forums

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

Question
0

Sign in to vote

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

0

Sign in to vote

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