How do I implement a mouseover function on mobile devices? - html

Question

I have created a price list for computers with a list of wares to different prices. But when one puts the mouse over a price, one can see more information about that price, including cost and profit. This works poorly on mobile devices.
How can I get this to work without installing extra modules?
The function i use now is:
<div title="Ware: Something
Price: 2499
 Kost: 2000.00
Profit: 899">2499</div>

Answer 1

Figured out by searching a way to make the function I like:
<script>
function functionAlert(msg) {
var confirmBox = $("#confirm");
confirmBox.find(".message").html(msg);
var myYes = confirmBox.find(".yes");
myYes.on('click', function() {
confirmBox.hide();
});
//myYes.click(myYes);
confirmBox.show();
}
</script>
<style>
#confirm {
display: none;
background-color: #AADDEE;
color: #000000;
border: 2px solid #555;
position: fixed;
width: 300px;
height: 350px;
left: 50%;
top: 40%;
box-sizing: border-box;
text-align: center;
}
#confirm button {
position: absolute;
background-color: #77AABB;
display: inline-block;
border-radius: 12px;
border: 3px solid #002244;
padding: 5px;
text-align: center;
width: 60px;
cursor: pointer;
bottom: 5px;
right: auto;
left: auto;
}
#confirm .message {
padding: 5px;
text-align: left;
}
</style>
<div id="confirm">
<div class="message">
</div>
<button class="yes">Lukk</button>
</div>
<div onclick="functionAlert('Ware: Something<br /><br />Price: 2499<br />Kost: 2000<br />Profit: 899')" title="Ware: Something

Price: 2499
Kost: 2000
Profit: 899">2499</div>