1

I added a custom option, say ring size in my product. I want to add a custom help text that will open a PDF in a popup window. Apparently I cannot use HTML in the title field.

Example:

<a href="a.pdf">need help ?</a>
  • what did you tried and where you want to show that? product page? – Qaisar Satti Oct 15 '15 at 7:46
  • i tried adding html tag in text title field but i figured it shows it as text not html – user1799722 Oct 15 '15 at 7:48
2

got to

app/design/frontend/yortheme/default/template/catalog/product/view/options/types/

and check for which type you select for custom option and add you condition and text there.

  • but can i do it vai observer, i do not want to edit files – user1799722 Oct 15 '15 at 8:02
  • you have to rewrite the custom option template.if you want to do the theme then do it from file and if you creating a module the rewrite template file i thin observer will not help on that – Qaisar Satti Oct 15 '15 at 9:06
1

Goto your attribute phtml file. If you have created configurable product, your size attribute file path look like:

app\design\frontend\MyPakage\MyTheme\template\catalog\product\view\type\options\configurable.phtml. Edit the file add some code css and js.

Add code where you want to display

<span id="someelem">Help me!</span>

Add the below code in the bottom of file.

JS Code

<script>
jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
        var tooltipTimeout;

$("#someelem").hover(function()
                    {tooltipTimeout = setTimeout(showTooltip, 2000);}, 
                    hideTooltip);

function showTooltip()
    {
    var tooltip = $("<div id='tooltip' class='tooltip'>I'm the tooltip!</div>");
    tooltip.appendTo($("#someelem"));
    }

function hideTooltip()
    {
    clearTimeout(tooltipTimeout);
    $("#tooltip").fadeOut().remove();
    }
  });
})(jQuery);

</script>

CSS Code

<style>
#someelem
    {
    cursor: pointer;
    }

.tooltip
    {
    display: block;
    position: absolute;
    background-color: rgb(130, 150, 200);
    padding: 5px;
    }
</style>

Hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.