Kdjykuj

I want to show a custom button on product detail page as well as on product listing.

this button will be visible based on an attribute.(if I select an attribute to yes while creating product, only then this button should be visible.)
and I want to show a block on hover on button.
i am very new to magento so detailed instruction will be better.

Creating a custom attribute eg.(mybutton) and it's Input Type will be yes or no now finally write below code in {theme}/template/catalog/product/view/addtocart.phtml near Add to Cart button.

<?php 

    if($_product->getMybutton()){



?>

    <button type="button">Special order  </button>

<?php } ?>

Hope it will help you.

What Arunendra said is right for the button but for the hover you need some more code.

This can go in your .css file and can be styled any way you want, our you can put it this way in your .phtml depends on your needs

 <style>

.tooltip{display: inline;position: relative;}

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 10px;color: #fff;content: attr(title);

            left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 6px;content: "";left: 50%;position: absolute;z-index: 99;}

.tip{display:inline-block;padding-left:12px;}

</style>

Then the button as mentioned in {theme}/template/catalog/product/view/addtocart.phtml

<?php 

        if($_product->getMybutton()){ //yes or no button

?>

<div class="tip">

<p class="tooltip">This can be anything you want and your text goes in ehre</p></div>

<?php } ?>

first of all thank you all for you replies.
but
i asked for detailed instruction but it's ok, i fix this by using this code. in addtocart and list template.

    <?php $attributeValue = Mage::getModel('catalog/product')->load($_product->getId())->getAttributeText('attribute name'); ?>

                            <?php if ($attributeValue == 'check with attributed value'){ ?>   

<!--html code--> 

                        <img src="img/special.png" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()" alt="Special Order" />

                        <div id="sidebar">text goes here</div>

<!--js for hide show-->

    <script type="text/javascript">

    function show_sidebar()

    {

    document.getElementById('sidebar').style.visibility="visible";

    }



    function hide_sidebar()

    {

    document.getElementById('sidebar').style.visibility="hidden";

    }

    </script>

    <?php } ?>