Блог

Главная - Вопросы по программированию - расположить стрелку всплывающей подсказки влево вместо дна

расположить стрелку всплывающей подсказки влево вместо дна

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я новичок в html css , и я создал речевой пузырь, который появляется при наведении курсора мыши на элемент . Моя проблема в том , что речевой пузырь указывает на дно , а не на мой элемент , как показано на рисунке ниже . Я хочу, чтобы стрелка указывала на мой элемент, чтобы я мог следовать за ним и навести курсор мыши на речевой пузырь

введите описание изображения здесь

Небольшая демонстрация кода ниже с использованием текста вместо моего изображения :

 function showinfo(id){
            if(id=="Patmos") document.getElementById("pat-info").style.visibility="visible";
}

function noinfo(id){
    if(id=="Patmos"){
       document.getElementById("pat-info").style.visibility="hidden";
    }

}  
 .speech-bubble{
    visibility: hidden;
}

.speech-bubble::after{
  content: "";
  position: relative;
  margin-left: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}



#pat-info{
    position:absolute;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    z-index:1;
    top:25px;
    left:-40px;

}  
 <a href="#" id="Patmos" onmouseout="noinfo(this.id)" onmouseover="showinfo(this.id)"> I am text </a>

<span class="speech-bubble" id="pat-info"> Info </span>

Другими словами , я хочу , чтобы стрелка моего текстового пузырька указывала на мой текст, чтобы я мог следить за ним и наводить курсор мыши на речевой пузырь , поскольку я хочу добавить к нему ссылки и кнопки позже . Я был бы признателен за вашу помощь в этом. Заранее благодарю вас .

Ответ №1:

Вот одна с изображением во всплывающей подсказке. Надеюсь, это поможет вам разобраться в вашей проблеме.

 a.tooltip span {
    z-index:10;
    display:none; 
    padding:10px 10px;
    margin-top:40px; 
    margin-left:-100px;
    width:200px;
    height: 100px;
    
    border-radius:2px;        
    box-shadow: 0px 0px 8px 4px #666;
    opacity: 0.8;
}
a.tooltip:hover span{
    display:inline; position:absolute; 
    color:#EEE;
    background:#333 url(http://www.menucool.com/tooltip/cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}

a.tooltip span::after {
  content: " ";
  position: absolute;
  top: -30px;
  left: 25%;
  margin-left: -5px;
  border-width: 15px;
  border-style: solid;
  border-color: transparent transparent black transparent;
  opacity: 0.8;
}  
 <a href="#" class="tooltip">
    HERE I AM!!!
    <span>
        <img src="https://via.placeholder.com/200x100" />
    </span>
</a>

Ответ №2:

Проверьте это.

 function showinfo(id){
            if(id=="Patmos") document.getElementById("pat-info").style.visibility="visible";
}

function noinfo(id){
    if(id=="Patmos"){
       document.getElementById("pat-info").style.visibility="hidden";
    }

}  
 #Patmos {
  text-align:center;
}

.speech-bubble{
    visibility: hidden;
    position:absolute;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    z-index:1;
    top:35px;
    left: -25px;
}
.speech-bubble:hover {
  visibility: visible;
}
.speech-bubble::after {
  content: " ";
  position: absolute;
  top: -15px; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}  
 <a href="#" id="Patmos" onmouseout="noinfo(this.id)" onmouseover="showinfo(this.id)"> I am text <span class="speech-bubble" id="pat-info"> Info </span></a>

Комментарии:

1. Большое вам спасибо . Однако , когда я пытаюсь навести курсор на речевой пузырь , он исчезает . Может быть, это потому, что у меня есть изображение с координатами вместо текста?