Tooltips auf Bild makieren
Zeigt wie man auf Bilder Markierungen setzen kann und beim Hovern ein Tooltip angezeigt bekommt. Das Script funktioniert ohne JS und ist responsive
Der hier verwendete Code
<html lang="de" class="desktop mbr-site-loaded" data-lt-installed="true" style=""><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Hotspot</title>
<style>
body {
font-family: Muli;
}
.cid-r2dgO3mSMQ {
padding-top: 75px;
padding-bottom: 90px;
background-color: #fafafa;
}
@media (min-width: 992px) {
.cid-r2dgO3mSMQ .mbr-figure {
padding-right: 4rem;
}
}
@media (max-width: 992px) {
.cid-r2dgO3mSMQ .mbr-figure {
padding-bottom: 1rem;
}
}
.cid-r2dgO3mSMQ .mbr-text {
color: #000000;
letter-spacing: 0.03em;
}
.cid-r2dgO3mSMQ blockquote {
position: relative;
display: none;
*border: 1px solid #fafafa;
border-color: transparent;
border-radius: 8px;
padding: 8px;
margin: 20px;
text-align: center;
line-height: 1.5em;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
}
.cid-r2dgO3mSMQ blockquote .notch {
position: absolute;
padding: 0;
width: 0;
height: 0;
}
.cid-r2dgO3mSMQ blockquote .notch-top {
top: -10px;
left: 50%;
margin-left: -10px;
border-top: 0;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(0, 0, 0, 0.7);
border-left: 10px solid transparent;
}
.cid-r2dgO3mSMQ blockquote .notch-right {
top: 50%;
right: -10px;
margin-top: -10px;
border-top: 10px solid transparent;
border-right: 0;
border-bottom: 10px solid transparent;
border-left: 10px solid rgba(0, 0, 0, 0.7);
}
.cid-r2dgO3mSMQ blockquote .notch-bottom {
bottom: -10px;
left: 50%;
margin-left: -10px;
border-top: 10px solid rgba(0, 0, 0, 0.7);
border-right: 10px solid transparent;
border-bottom: 0;
border-left: 10px solid transparent;
}
.cid-r2dgO3mSMQ blockquote .notch-left {
top: 50%;
left: -13px;
margin-top: -10px;
border-top: 10px solid transparent;
border-right: 10px solid rgba(0, 0, 0, 0.7);
border-bottom: 10px solid transparent;
border-left: 0;
}
.cid-r2dgO3mSMQ img {
display: block;
border-radius: 20px;
width: 100%;
}
.cid-r2dgO3mSMQ .hotspot-demo-1-left {
position: relative;
width: 100%;
}
.cid-r2dgO3mSMQ .spots {
position: absolute;
color: #fff;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.cid-r2dgO3mSMQ .spot {
position: absolute;
text-align: center;
line-height: 24px;
font-size: 16px;
*font-weight: bold;
color: #fff;
width: 32px;
height: 32px;
border: 2px solid red;
border-radius: 16px;
background-color: transparent;
}
.cid-r2dgO3mSMQ .spot:hover {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cid-r2dgO3mSMQ #spot-01,
.cid-r2dgO3mSMQ #spot-02,
.cid-r2dgO3mSMQ #spot-03 {
display: inline-block;
min-width: 100px;
}
.cid-r2dgO3mSMQ #spot-01 {
position: absolute;
top: 10%;
left: 40%;
}
.cid-r2dgO3mSMQ #spot-01:hover > blockquote {
display: block;
top: -26px;
left: -98%;
}
.cid-r2dgO3mSMQ #spot-02 {
position: absolute;
top: 35%;
left: 57%;
}
.cid-r2dgO3mSMQ #spot-02:hover > blockquote {
display: block;
top: 25px;
left: -35%;
}
.cid-r2dgO3mSMQ #spot-03 {
position: absolute;
top: 60%;
left: 28%;
}
.cid-r2dgO3mSMQ #spot-03:hover > blockquote {
display: block;
top: -26px;
left: 25px;
}
.cid-r2dq8GST1A {
padding-top: 60px;
padding-bottom: 0px;
background-color: #bbbbbb;
}
.cid-r2dq8GST1A .mbr-text {
color: #000000;
}
.cid-r2dq8GST1A .inner-container {
margin: 0;
}
.cid-r2dq8GST1A .line {
background-color: #cccccc;
color: #cccccc;
height: 1px;
margin: 0 auto;
}
.cid-r2dq8GST1A .section-text {
padding: 2rem 0;
letter-spacing: 0.03em;
color: #000000;
text-align: left;
}
.cid-r2dpMP9TED {
padding-top: 90px;
padding-bottom: 90px;
background-color: #f7f7f7;
}
.cid-r2dpMP9TED .row {
justify-content: center;
}
.cid-r2dpMP9TED .text-black {
font-weight: 800;
letter-spacing: 0.1em;
}
.cid-r2dpMP9TED .btn {
margin-bottom: 2rem;
}
.cid-r2dpMP9TED .mbr-text {
color: #444;
font-weight: 600;
letter-spacing: 0.1em;
}
@media (max-width: 575px) {
.cid-r2dpMP9TED .mbr-text {
text-align: center;
margin-bottom: 2rem;
}
}
.cid-r2dpMP9TED .links {
color: #232323;
text-align: center;
}
</style>
</head>
<body>
<section class="mbr-section content6 cid-r2dgO3mSMQ" id="article4-t">
<div class="hotspot-demo-1">
<div class="hotspot-demo-1-left">
<img src="/image/mbr-900x675.jpg">
<div class="spots">
<div id="spot-01">
<a class="spot" href="https://www.mobirise-tutorials.com/" target="_blank">+</a>
<blockquote>
<span class="mbri-link mbr-iconfont mbr-iconfont-btn"></span> Tutorials
<span class="notch notch-right"></span>
</blockquote>
</div>
<div id="spot-02">
<a style="cursor: help;" class="spot">+</a>
<blockquote>Brille
<span class="notch notch-top"></span>
</blockquote>
</div>
<div id="spot-03">
<a style="cursor: help;" class="spot">+</a>
<blockquote>Handy
<span class="notch notch-left"></span>
</blockquote>
</div>
</div>
</div>
</div>
</section>
</body></html>