locked
Custom 'title' attribute RRS feed

  • Question

  • User-1826049516 posted

    Hi,

    https://jsfiddle.net/726c9wLv/

    I am working on this at the moment and it looks way better than the default title attribute. One problem I am finding is the positioning of it; the default one is based on the cursor position so it just knows where on the page the element is and adjusts as needed. In my custom one it ends up disappearing off screen depending where the element is.

    I can see the problem, just can't work out how to get around it!

    Thanks

    Monday, July 8, 2019 9:10 AM

Answers

  • User839733648 posted

    Hi ldoodle,

    According to your description and code, I've found that the attribute which affect the behaviour is the right attribute in [data-title]::after.

    This attribute will affect the position of the title showing.

    I've made a test and found a workaround is that you could define another class to override the attribute.

    Here is my testing code.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body {
                font-family: helvetica, sans-serif;
            }
    
            a:last-of-type {
                float: right;
            }
    
            [data-title] {
                ;
            }
    
                [data-title]::after {
                    ;
                    pointer-events: none;
                    border: 1px solid rgb(77, 115, 184) !important;
                    visibility: hidden;
                    background-color: rgba(255, 255, 255, 0.925);
                    -moz-box-shadow: rgba(77, 115, 184, 0.8) 0 1.2px 12px 0, rgba(77, 115, 184, 0.4) 0 2.4px 6px 0;
                    -webkit-box-shadow: rgba(77, 115, 184, 0.8) 0 1.2px 12px 0, rgba(77, 115, 184, 0.4) 0 2.4px 6px 0;
                    box-shadow: rgba(77, 115, 184, 0.6) 0 1.2px 12px 0, rgba(77, 115, 184, 0.3) 0 2.4px 6px 0;
                    white-space: nowrap;
                    content: attr(data-title);
                    opacity: 0;
                    padding: 8px 12px 8px 6px;
                    right: -4px;
                    bottom: -36px;
                    z-index: 600;
                }
            .test::after {
                right: -60px;
            }
               [data-title]:hover::after {
                    opacity: 1;
                    visibility: visible;
                    transition: opacity 0.5s ease-out 0.5s;
                }
        </style>
    </head>
    <body>
        <a href="https://www.google.co.uk" data-title="Visit Google's UK search engine" class="test"><img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></a>
        <a href="https://www.google.co.uk" data-title="Visit Google's UK search engine" ><img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></a>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 9, 2019 2:32 AM
  • User71929859 posted

    the default one is based on the cursor position so it just knows where on the page the element is and adjusts as needed

    Well, you definitely need JavaScript to do this. CSS cannot do this by itself. You have to set the x, y position of the title attribute based on mouse position.

    In my custom one it ends up disappearing off screen depending where the element is.

    You need to introduce CSS variables for the left and top properties.

    I can see the problem, just can't work out how to get around it!

    Yep, this is not an easy thing to do. But check the example I cooked for you

    <!DOCTYPE html>
    <html>
    <head>
        <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
        <script>
            window.onmousemove = function (e) {
                var x = (e.clientX),
                    y = (e.clientY);
    
                if (document.body.clientWidth > x)
                    document.documentElement.style.setProperty('--x', x + 'px');
                if (document.body.clientHeight > y)
                    document.documentElement.style.setProperty('--y', y + 'px');
            };
        </script>
        <style>
            :root {
                --x: 0;
                --y: 0;
            }
    
            body {
                font-family: helvetica, sans-serif;
            }
    
            a:last-of-type {
                float: right;
            }
    
            [data-title] {
                ;
            }
    
                [data-title]::after {
                    ;
                    pointer-events: none;
                    border: 1px solid rgb(77, 115, 184) !important;
                    visibility: hidden;
                    background-color: rgba(255, 255, 255, 0.925);
                    -moz-box-shadow: rgba(77, 115, 184, 0.8) 0 1.2px 12px 0, rgba(77, 115, 184, 0.4) 0 2.4px 6px 0;
                    -webkit-box-shadow: rgba(77, 115, 184, 0.8) 0 1.2px 12px 0, rgba(77, 115, 184, 0.4) 0 2.4px 6px 0;
                    box-shadow: rgba(77, 115, 184, 0.6) 0 1.2px 12px 0, rgba(77, 115, 184, 0.3) 0 2.4px 6px 0;
                    white-space: nowrap;
                    content: attr(data-title);
                    opacity: 0;
                    padding: 8px 12px 8px 6px;
                    left: var(--x);
                    top: var(--y);
                    z-index: 600;
                }
    
                [data-title]:hover::after {
                    -webkit-opacity: 1;
                    opacity: 1;
                    visibility: visible;
                    transition: opacity 0.5s ease-out 0.5s;
                }
        </style>
    </head>
    <body>
        <a href="https://www.google.co.uk" data-title="Visit Google's UK search engine"><img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></a>
        <a href="https://www.google.co.uk" data-title="Visit Google's UK search engine"><img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></a>
    </body>
    
    </html>

    I guess this is pretty much what you want

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 9, 2019 3:44 AM

All replies

  • User839733648 posted

    Hi ldoodle,

    According to your description and code, I've found that the attribute which affect the behaviour is the right attribute in [data-title]::after.

    This attribute will affect the position of the title showing.

    I've made a test and found a workaround is that you could define another class to override the attribute.

    Here is my testing code.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body {
                font-family: helvetica, sans-serif;
            }
    
            a:last-of-type {
                float: right;
            }
    
            [data-title] {
                ;
            }
    
                [data-title]::after {
                    ;
                    pointer-events: none;
                    border: 1px solid rgb(77, 115, 184) !important;
                    visibility: hidden;
                    background-color: rgba(255, 255, 255, 0.925);
                    -moz-box-shadow: rgba(77, 115, 184, 0.8) 0 1.2px 12px 0, rgba(77, 115, 184, 0.4) 0 2.4px 6px 0;
                    -webkit-box-shadow: rgba(77, 115, 184, 0.8) 0 1.2px 12px 0, rgba(77, 115, 184, 0.4) 0 2.4px 6px 0;
                    box-shadow: rgba(77, 115, 184, 0.6) 0 1.2px 12px 0, rgba(77, 115, 184, 0.3) 0 2.4px 6px 0;
                    white-space: nowrap;
                    content: attr(data-title);
                    opacity: 0;
                    padding: 8px 12px 8px 6px;
                    right: -4px;
                    bottom: -36px;
                    z-index: 600;
                }
            .test::after {
                right: -60px;
            }
               [data-title]:hover::after {
                    opacity: 1;
                    visibility: visible;
                    transition: opacity 0.5s ease-out 0.5s;
                }
        </style>
    </head>
    <body>
        <a href="https://www.google.co.uk" data-title="Visit Google's UK search engine" class="test"><img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></a>
        <a href="https://www.google.co.uk" data-title="Visit Google's UK search engine" ><img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></a>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 9, 2019 2:32 AM
  • User71929859 posted

    the default one is based on the cursor position so it just knows where on the page the element is and adjusts as needed

    Well, you definitely need JavaScript to do this. CSS cannot do this by itself. You have to set the x, y position of the title attribute based on mouse position.

    In my custom one it ends up disappearing off screen depending where the element is.

    You need to introduce CSS variables for the left and top properties.

    I can see the problem, just can't work out how to get around it!

    Yep, this is not an easy thing to do. But check the example I cooked for you

    <!DOCTYPE html>
    <html>
    <head>
        <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
        <script>
            window.onmousemove = function (e) {
                var x = (e.clientX),
                    y = (e.clientY);
    
                if (document.body.clientWidth > x)
                    document.documentElement.style.setProperty('--x', x + 'px');
                if (document.body.clientHeight > y)
                    document.documentElement.style.setProperty('--y', y + 'px');
            };
        </script>
        <style>
            :root {
                --x: 0;
                --y: 0;
            }
    
            body {
                font-family: helvetica, sans-serif;
            }
    
            a:last-of-type {
                float: right;
            }
    
            [data-title] {
                ;
            }
    
                [data-title]::after {
                    ;
                    pointer-events: none;
                    border: 1px solid rgb(77, 115, 184) !important;
                    visibility: hidden;
                    background-color: rgba(255, 255, 255, 0.925);
                    -moz-box-shadow: rgba(77, 115, 184, 0.8) 0 1.2px 12px 0, rgba(77, 115, 184, 0.4) 0 2.4px 6px 0;
                    -webkit-box-shadow: rgba(77, 115, 184, 0.8) 0 1.2px 12px 0, rgba(77, 115, 184, 0.4) 0 2.4px 6px 0;
                    box-shadow: rgba(77, 115, 184, 0.6) 0 1.2px 12px 0, rgba(77, 115, 184, 0.3) 0 2.4px 6px 0;
                    white-space: nowrap;
                    content: attr(data-title);
                    opacity: 0;
                    padding: 8px 12px 8px 6px;
                    left: var(--x);
                    top: var(--y);
                    z-index: 600;
                }
    
                [data-title]:hover::after {
                    -webkit-opacity: 1;
                    opacity: 1;
                    visibility: visible;
                    transition: opacity 0.5s ease-out 0.5s;
                }
        </style>
    </head>
    <body>
        <a href="https://www.google.co.uk" data-title="Visit Google's UK search engine"><img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></a>
        <a href="https://www.google.co.uk" data-title="Visit Google's UK search engine"><img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></a>
    </body>
    
    </html>

    I guess this is pretty much what you want

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 9, 2019 3:44 AM
  • User-1826049516 posted

    Thanks both for the replies.

    I thought that might be the case. I don't really want all my images towards the left of the screen to have a special class, because with responsive design I don't know exactly when an image will be.

    So if JavaScript is the only alternative to determine both where the cursor is AND it's proximity to the edge of a window, then probably a bit too extravagant!

    Tuesday, July 9, 2019 8:00 AM