Tooltip/hover-text In An Array

August 28, 2023 Post a Comment

I'm trying to display a tooltip or hover-text in a list-menu whereby if the user select that value, there will be additional text provided. Is it possible ? As the data is currentl

Solution 1:

What you are attempting to do will not be something implemented in PHP but rather Javascript. PHP involves code that is ran on the server-side and does not deal with DOM elements or client-side components such as the hover text/tool-tip you are wishing to load. Javascript is parsed by the browsers after the server-side code is crunched out and will handle additional changes to your pages after the immediate load.

I recommend you look into learning (or using, if familiar) jQuery as it will aid you with your task. It is a Javascript library with simplified bindings for ease of use. There is great documentation and many plugins that use it everyday.

Reference: http://jquery.com/

Enjoy and good luck!

Solution 2:

Here is a possible solution. It uses jQuery, since you can't use the title-attribute and you can't put another child element into the select-Container, it wouldn't be valid HTML.

See the Demo:

http://jsfiddle.net/DLyMG/

How it works

The trick with this is, to bind the hover interests.hover. The first function is triggered when you're over the select-box, the second is triggered when you leave. I added a timeout for this reason: When the user selects something, he moves out of the element (because the list is longer than the element itself). So, when he selects something, he would also trigger the mouseout event, therefore we have the timeout.

The second thing is to bind the onchange-event, which is done below. When the user selects a value, the content of the tooltip is changed and you can add any text or HTML as you like.

Javascript

<script>

$(document).ready(function () {

    var interests       = $('#Interests');
    var tooltip         = $('#tooltip');
    var tooltipInfo     = $('#tooltip_info');

    interests.hover(
        function() {
            tooltip.fadeIn(200);
        },
        function() {
            setTimeout ( function () {
                tooltip.fadeOut(200); tooltipInfo.html();
            }, 1000);
        }
    );

    interests.bind('change', function() {
        tooltipInfo.html('user has changed the value');
    });

});

</script>

CSS

<style>aside.tooltip {
    display:        none;
    position:       absolute;
    top:            20px;
    left:           300px;
}

</style>

HTML

<selectid="Interests"><optionvalue="1">Value 1</option><optionvalue="2">Value 2</option><optionvalue="3">Value 3</option></select><asideid="tooltip"class="tooltip">
    Hey, I'm a Tooltip.
    <spanid="tooltip_info"></span></aside>

Note

This needs of course some further improvements. Just an example of how this is possible. And you need to include the jQuery-library in your document, like:

<scriptsrc="src/js/com.jquery/1.7/jquery-1.7.min.js"></script>

Solution 3:

You want to have content appear on value change within a select box? Use jQuery change() http://jsfiddle.net/PxGEc/1/

Html5 Learning