Overlays in Opera Extensions

Question

I'm a beginner to opera extension development.

Is there an equivalent for firefox xul overlays in opera?

I want to create temporary overlays as I hover the mouse over text. The overlay should change or disappear when the mouse is moved away from the text.

I think you have to do this with HTML in Opera. But, anyway, check http://dev.opera.com/articles/view/opera-extensions-buttons-badges-and-popups/ — c69, Aug 07 '12 at 21:28

score 0 · Answer 1 · answered Oct 09 '12 at 02:15

To interact with a particular page, you need to use an injected script. This is a JavaScript file (effectively a UserScript/UserJS) placed inside a folder named includes.

In this file you could put code for a CSS-only tooltip, such as those found here: http://sixrevisions.com/css/css-only-tooltips/ and then attach the CSS to a style element in the page.

This example should give you something to build upon:

// includes/injected.js
window.addEventListener('DOMContentLoaded', function() {
    // Set the CSS for the tooltip
    var tooltipCSS = '.tooltip {position: relative;}.tooltip span {margin-left: -999em; position: absolute;} .tooltip:hover span {border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;} .classic {padding: 0.8em 1em;} * html a:hover {background: transparent;} .classic {background: #FFFFAA; border: 1px solid #FFAD33; color: #333333;}';

    // Set the text for the tooltip
    var tooltipText = 'This is a tooltip';

    // Add the CSS to the page
    var style = document.createElement('style');
    style.textContent = tooltipCSS;
    document.head.appendChild(style);

    // Loop through all links to add "tooltip" class and extra <span>
    var links = document.getElementsByTagName('a');
    for (var i = 0, len = links.length; i < len; i++) {
        links[i].classList.add('tooltip');
        links[i].innerHTML += '<span class="classic">' + tooltipText + '</span>';
    }
}, false);

Overlays in Opera Extensions

1 Answers1