<?php
    if($_product->getMybutton()){

?>
    <button type="button">Special order  </button>
<?php } ?>

<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>

<?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 } ?>

<?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 } ?>