Не могу разобраться в Tooltip

235

28 февраля 2018, 10:38

Добрый день, вопрос такой у меня есть HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tooltip</title>
    <link rel="stylesheet" href="css/css_tooltip.css">
    <link rel="stylesheet" href="css/jquery-ui.min.css">
</head>
<body>
<div id="main">
    <div class="color_box">
        <a href="#" class="radio" style="background-color: #FFFFFF;" title="Алюминий">
            <input type="radio" name="color" style="opacity: 0;">
        </a>
        <a href="#" class="radio graize" style="background-color: #F5F5DC; " title="Бежевый" >
            <input type="radio" name="color" style="opacity: 0;">
        </a>
        <a href="#" class="radio" style="background-color: #964B00; " title="Коричневый" >
            <input type="radio" name="color" style="opacity: 0;">
        </a>
        <a href="#" class="radio graize" style="background-color: #98FB98; " title="Светло-зеленый" >
            <input type="radio" name="color" style="opacity: 0;">
        </a>
    </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script  type="text/javascript"  src="tooltip/jquery.js"></script>
    <script  type="text/javascript"  src="tooltip/jquery-ui.min.js"></script>
    <script  type="text/javascript"  src="tooltip/jquery-ui.js"></script>
    <script type="text/javascript" src="tooltip/tooltip.js"></script>   
</body>
</html>

Пытаюсь освоить Tooltip, и мне надо, чтобы выводилось вспомогающе окно только у элементов с классом graize. Получается фигня( И не могу найти документацию

$( function() {
  $(document).tooltip({
      content: function() {
        var color_box = ('.main .color_box a')
        if ( color_box.hasClass('graize')) {
            return color_box.attr( "title" );
            }
       }
    });          
});

Подскажите, как это можно реализовать,пожалуйста

Answer 1

Попробуйте так, подключить тултип к определенному классу