ツールチップの表示と非表示

by Matsunaga_Ajike

HTML

<span class="tooltip p_relative">ツールチップを表示</span>
<span class="tooltip_message d_none p_absolute t_center">表示されました。</span>

SCSS

/**
 * Style
 */
 $blue: #00BCD4;
 $white: #ffffff;
 
.tooltip {
    &:hover {
        @extend .hover;
    }
    &_message {
        background-color: $blue;
        color: $white;
        width: 200px;
        padding: 30px;
        top: 40px;
        left: 10px;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.12);
        z-index: 1;   
    }
}


/**
 * Utility
 */
.hover {
    opacity: 0.5;
    cursor: pointer;
}

.d_none { display: none; }
.d_block { display: block; }
.p_relative { position: relative; }
.p_absolute { position: absolute; }
.t_center { text-align: center; }

JavaScript

$(function() {
    $('.tooltip').mouseover(function() {
    	execAddRemoveClass('.tooltip_message', 'd_block', 'd_none');
    })
    $('.tooltip').mouseout(function() {
    	execAddRemoveClass('.tooltip_message', 'd_none', 'd_block');
    })
});


function execAddRemoveClass(className, addClassName, removeClassName) {
	 $(className)
     	.addClass(addClassName)
        .removeClass(removeClassName);
}