как автоматически показывать всплывающую подсказку в раскрывающемся меню, а затем скрывать при выборе элемента

Question

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

$(document).ready(function() {
        $("#divMain").kendoTooltip({
            content: "<b>Tooltip here for drop-down</b>",
            width: 300,
            height: 50         
        });           
    });

спасибо

Answer 1

Этого можно достичь с помощью JQuery Скажем, у вас есть выпадающий список с классом dropdown-content, <a> тегов для href, всплывающая подсказка с идентификатором id="tooltip", использующая функцию JQuery css() и установите его на display:none, когда ваш `dropdown-content тег был нажат.

$('.dropdown-content a').click(function() {
    $('#tooltip').css('display', 'none');
});

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

#tooltip {
  position:absolute;
  z-index: 1;
  display: inline-block;
  background-color: #4CAF50;
  color: #fff;
  padding: 5px;
  border-radius: 0px 5px 5px 0px;
  margin-left: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Button with tooltip</h2>

<div class="dropdown">
  
  <button class="dropbtn">Dropdown</button>
  
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<span id="tooltip">This is a tooltip</span>

$('.dropdown-content a').click(function() {
    $('#tooltip').css('display', 'none');
});