Bootstrap Popovers – Создание всплывающего контента (информера)

Так Popover для этого и предназначен.

Здравствуйте!
В этом случае нужно:
1. Установить ему в качестве значение опции trigger значение manual:

<button type="button" class="btn btn-danger" data-toggle="popover" data-trigger="manual" title="Заголовок информера" data-content="Некоторое содержимое информера, показывающееся при наведении на него">Наведи на меня</button>

2. Написать логику (сценарий на JavaScript), который будет открывать и закрывать всплывающий контент так как это нужно.
Например:

$(function () {

  $('[data-toggle="popover"]').popover();

  $('[data-toggle="popover"]').on('mouseenter', function () {
    if (!$(this).attr('aria-describedby')) {
      $(this).popover('show');
    }
  });

  $('[data-toggle="popover"]').on('click', function () {
    if ($(this).attr('aria-describedby')) {
      $(this).popover('hide');
    }
  });

  $(document).on('click', ':not(.popover)', function (e) {
    if (e.target.closest('.popover') || $(e.target).attr('data-toggle') === 'popover') {
      return;
    }
    $('[data-toggle="popover"]').each(function () {
      $(this).popover('hide');
    })
  });

});

Пример: Popovers у которого в качестве значение параметра trigger используется manual

Для этого создаёте data-атрибуты, например data-img и data-alt, а затем их используйте в content:

$('[data-toggle="popover"]').popover({
  title: 'Описание...',
  html: true,
  content: function () { return '<div class="d-flex flex-column"><a href="#"><img class="img-fluid" src="' + $(this).attr('data-img') + '" alt="' + $(this).attr('data-img') + '"></a><h4 class="mt-2">Всё о бабочках</h4><div>Мы можем считать, что знаем все о бабочках, но взглянув на порхающих красавиц еще раз, понимаем, что сумели только приоткрыть завесу тайны, ...</div></div>' }
});

Пример popover с использованием значений data-атрибутов

СПАСИБО, огромное, Александр! Завтра буду разбираться, а сейчас — на работу идти нужно!

Здравствуйте, Александр. В случае одного поповера на странице — именно то, что нужно! В случае нескольких (значение alt ничего не меняет, в скрипте titile и content отображает наполнение поповера — но ЭТИ ДАННЫЕ ОБЩИЕ ДЛЯ ВСЕХ ПОПОВЕРОВ — картинки разные, текст одинаковый).

Существует вариант создания нескольких поповеров, чтобы наполнение (шапка, картинка, описание)

задавалось в HTML коде (title, content, img),
а функционал в в скрипте.

В нашем случае, по сути, в HTML мы указали лишь название кнопки и картинку! Остальное содержание — в скрипте, но оно идентично для всех поповеров!

Можно ли добавить в этот код еще картинку?

<a href="#" tabindex="0" class="btn btn-warning popover-dismissible" role="button" data-toggle="popover" data-trigger="focus" title="Заголовок панели" data-content="Текст панели.">Ссылка с popover</a>
<code>

а скрипт оставить таким, например
<code>
<script type="text/javascript">
$(document).ready(function(){
  $('.popover-dismissible').popover({
    trigger: 'focus',
    placement: 'top'
  });
});
</script>
<code>

Спасибо!

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

<div class="container">
  <h3>РАЗНОЕ СОДЕРЖАНИЕ ПОПОВЕРОВ</h3>
  <a href="#"  data-toggle="popover" data-img="assets/images/1.jpg" title="Popover Header">award1</a>
  <a href="#"  data-toggle="popover" data-img="assets/images/2.jpg" title="Popover Header 2">award2</a>
</div>

<script>
$(document).ready(function(){
	 $('[data-toggle="popover"]').popover({
          trigger: 'focus',
		  //trigger: 'hover',
		  placement: 'top',
          html: true,
          content: function () {
				return '<img class="img-fluid" src="'+$(this).data('img') + '" />';
          },
          title: 'Toolbox'
    }) 
});
</script>

НО, все описание нужно будет в шапке записать (много текста — плохо будет смотреться).
В этом коде HTML не хватает только data-content! Можно ли что-то сделать в этом случае?
Достал я уже своими поповерами…

Спасибо!

Александр, ВЫ ПРОФИ!
Собрал по крупинкам ваши рекомендации — все получилось!

<div class="container">

    <button type="button" class="btn btn-info" data-toggle="popover-1" data-img="assets/images/1.jpg"
      data-alt="descript">
      award-1
    </button>
    <button type="button" class="btn btn-info" data-toggle="popover-2" data-img="assets/images/2.jpg"
      data-alt="descript">
      award-2
    </button>

  </div>



<script>
    $(function () {
      $('[data-toggle="popover-1"]').popover({
        title: 'бабочка фиолетовая',
        html: true,
        trigger: 'focus',
	placement: 'bottom',
        content: function () { return '<div class="d-flex flex-column"><a href="#"><img class="img-fluid" src="' + $(this).attr('data-img') + '" alt="' + $(this).attr('data-img') + '"></a><h4 class="mt-2">бабочка</div></div>' }
      });
    })
  </script>

  <script>
    $(function () {
      $('[data-toggle="popover-2"]').popover({
        title: 'бабочка розовая',
        html: true,
        trigger: 'focus',
	placement: 'bottom',
        content: function () { return '<div class="d-flex flex-column"><a href="#"><img class="img-fluid" src="' + $(this).attr('data-img') + '" alt="' + $(this).attr('data-img') + '"></a><h4 class="mt-2">мотылек</div></div>' }
      });
    })
  </script>

+ клик по КНОПКЕ не перезагружает страницу, в случае ссылки с типом кнопка!
переделываю обратно!

СПАСИБО!

Отлично!

Сделайте другую разметку content части для popover.
Например, так:

<div class="d-flex flex-column">
  <a href="#">
    <img class="img-fluid" src="/path/to/image.jpg" alt="описание картинки">
  </a>
  <h4 class="mt-2">Заголовок</h4>
  <div>Некоторое описание...</div>
</div>

Пример popover с картинкой

Александр, СПАСИБО за оказанную помощь! я добавил еще placement: 'top', trigger: 'focus', ТО, ЧТО ИСКАЛ ВТОРОЙ ДЕНЬ! Последнее, как пользоваться селектором для разных поповеров на одной странице! ТАМ ОБЩИЙ СКРИПТ с одной ссылкой. СПАСИБО!

Давайте элементам разные значения data-атрибутов, а затем их используйте при инициализации:

<button type="button" data-toggle="popover-1">Кнопка 1</button>
<button type="button" data-toggle="popover-2">Кнопка 2</button>

<script>
$('[data-toggle="popover-1"]').popover({ ... });
$('[data-toggle="popover-2"]').popover({ ... });
</script>

Открывайте инструменты разработчика в браузере и переходите на вкладку «Element». После этого включайте кнопку для инспектирования элементов, выбирайте на странице нужные и изучайте какие к ним стили применяются.

Нашел пример, сейчас монтирую у себя на странице! Спасибо!

Он и так абсолютно позиционирован. Скорее всего, контент подгружается в него динамически. А когда он уже загрузился (во второй раз и далее), то отображается правильно.
Чтобы правильно настроить AJAX подгрузку данных воспользуйтесь следующей веткой комментариев.

Доброго времени суток, Александр!
Благодарю за ваш ответ, но все равно не до конца понимаю реализации процесса.

В коде popover выглядит следующим образом

<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-345"><a href="#" data-toggle="popover" title="Инновационная линия для регенерации кожи" data-content="<img src='http://site.ru/wp-content/themes/clean-commerce/images/nutrisensation-menu.jpg'>">Nutri Sensation</a></li>

Если я правильно понимаю, динамическая подгрузка контента в поповер осуществляется через ajax?

использую только стандартные функции bootstrap

Александр, прошу прощения!

Пока я вам тут задаю вопросы и прошу помощи, дизайнер прислал новый вариант меню. вот теперь, как я понимаю, мне нужно именно динамически подгружать для каждого пункта меню свою картинку, да еще и в отдельном блоке :( take.ms/llCtk

Возможно, такой вариант уже и не стоит на popover делать, а чисто на js? если так, то буду искать решение…

Спасибо за ваше внимание и уделенное время!

Кстати, это связано с тем, что картинка в атрибуте data-content не имеет фиксированные размеры. Кроме этого, она находится в атрибуте и поэтому не будет автоматически загружена браузером при загрузке страницы. Загрузка картинки в popover происходит в момент открытия окна. А т.к. на загрузки картинки нужно время, то она начинает в нём уже отображаться, когда элемент popover уже просчитал свои размеры. Поэтому при первой загрузке popover с таким контентом будет неправильно позиционирован.
Это можно исправить различными способами:
1. Использовать фиксированный размер картинок, в этом случае размеры popover будут рассчитаны правильно.
2. Подгружать картинки, хранящиеся в data-content, после загрузки страницы:

$('[data-toggle="popover"]').popover();
	
var output = '';
$('[data-toggle="popover"]').each(function(){
  output += $(this).attr('data-content');
});
	
$('body').append('<div style="display:none">' + output + '</div>');

3. Подгружать картинку в момент клика по элементу. Показывать элемент popover после загрузки картинки.

Нет, в вашем случае это связано с процессом загрузки картинки. Описал процесс в этом комментарии.

Да, такое можно очень просто решить на JavaScript. Popover в этом случае не нужен.

Александр, большое спасибо за ваши ответы!
Значит буду думать, как реализовать на JavaScript :)

Кстати, popover оказался нужным в боковом меню, ваше подсказка по решению в любом случае пригодится. Спасибо!

Еще вопрос. Не подскажете годный мануал по изучению JS, чтоб прям для таких чайников как я, все было доходчиво? По сему выходит, что придется изучать js как ни крути ))

На данном сайте есть материалы по JavaScript. Изучайте, если что-то непонятно спрашивайте.

Александр, доброго времени суток!
Извиняюсь за такой вопрос, но не подскажете вариант кода js для решения моего вопроса?

Боюсь, пока я изучаю основы JS и дойду до познаний, чтобы осуществить то что нужно, пройдет весьма много времени. А в данной ситуации затягивание повлечет плачевный итог

Спасибо!

Можно сделать так. Сохранить в data-атрибут ссылки адрес картинки. А при поднесении курсора прочитать этот адрес и отобразить изображение.
Например, так:

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <a href="#" data-img="img/img1.jpg">Ссылка 1</a>
      <a href="#" data-img="img/img2.jpg">Ссылка 2</a>
      <a href="#" data-img="img/img3.jpg">Ссылка 3</a>	
    </div>
    <div class="col-md-8 img-content">

    </div>
  </div>
</div>
...
<script>
$(function(){
  $('a[data-img]').hover(function(){
    if ($('img.data-img').length===0) {
      $('.img-content').prepend('<img class="data-img" src="" />');
    }
      $('img.data-img').attr('src',$(this).attr('data-img'));
    }, function(){
      $('img.data-img').attr('src','');
  });
});
</script>

Александр, большое вам спасибо!

Как легко, когда ты это знаешь )))

Возникла у меня трудность с выводом в этот же блок .img-content вместе с картинкой, заголовка из data-title. пробовал по аналогии с картинкой, но не получается. почитал статьи на вашем сайте по jQuery data и другие оп JS, но все равно не могу понять как это реализовать. видимо тут не просто минимальных знаний по js нужно иметь.

Не сочтите за наглость, не подскажете куда копать в этом направлении?

Большое вам спасибо!

Можно так:

$(function(){
  $('a[data-img]').hover(function(){
    if ($('img.data-img').length===0) {
	  $('.img-content').prepend('<img class="data-img" src="" />');
	}
    if ($('h3.data-title').length===0) {
	  $('.img-content').prepend('<h3 class="data-title"></h3>');
	}
	$('img.data-img').attr('src',$(this).attr('data-img'));
	$('h3.data-title').text($(this).attr('data-title'));
  }, function(){
    $('img.data-img').attr('src','');
    $('h3.data-title').text('');	
  });
});

Огромное вам спасибо, Александр!
Сделал анализ своего кода по вашему, понял где ошибку допустил.
Еще раз спасибо!!!

Для этого необходимо сразу вернуть некоторый элемент, например, с текстом «Загрузка...». А уже потом, когда данные прейдут, изменить контент этого элемента.
Пример кода:

$(function(){
  $('[data-toggle="popover"]').popover({
    html: true,
    content: function(){
      // уникальный id элемента 
      var idContent = "idContent-" + $.now();
      $.ajax({
        type: 'POST',
        url: 'index.php',
        cache: false,
      }).success(function(data){
        // помещаем в элемент текст подсказки
        $('#' + idContent).html(data);
      });
      // возвращаем элемент, в которой поместим текст подсказки, когда прийдёт ответ 
      return '<div id="' + idContent + '">Загрузка...</div>';
    }
  });
});

Отлично, спасибо за помощь!
Наконец-то заработало, а то уже два дня себе мозги ломал…

Только теперь одна проблема: т.к. мы вначале подсовываем поповеру лоадер, то поповер генерируется минимальных размеров. А когда мы уже подставляем текст подсказки, которая не помещается в стандартные размеры, то поповер ломается:


Можно ли это как-то решить?
Использую поповер для отображения 5 лайкнувших пользователей.

Ну, тогда сделайте так (чтобы не заниматься рассчитыванием его положения):

$('[data-toggle="popover"]').popover({
  html: true,
  placement: 'top',
  content: function(){
    // сохранить текущий контекст
    var _this = this;
    // аjax-запрос на получение данных
    $.ajax({
      type: 'POST',
      url: 'index.php',
      cache: false,
      success: function(data){
        // устанавливаем атрибут data-content (чтобы не использовался параметр контент)
        $(_this).attr('data-content',data);
        // открыть popover
        $(_this).popover('show');
      }
    });
    return 'Загрузка...';
  }
});

Тут также как и в вышеприведённом примере, сначала отображаем сообщение «Загрузка...». Но после того, как данные прейдут, делаем немного по другому… Устанавливаем эти данные в качестве значения атрибута data-content и вызываем метод popover show. Если у popover установлен атрибут data-content, то он не будет использовать значение параметра content (т.е. вызывать функцию). В этом случае больше повторных ajax-запросов не будет.

Если же данные в popover могут измениться через некоторое время, и вы хотите чтобы при следующем открытии popover они опять брались с сервера, то можно сделать так:

$('[data-toggle="popover"]').popover({
  html: true,
  placement: 'top',
  content: function(){
    // сохранить текущий контекст
    var _this = this;
    // аjax-запрос на получение данных
    $.ajax({
      type: 'POST',
      url: 'index.php',
      cache: false,
      success: function(data){
        // устанавливаем атрибут data-content (чтобы не использовался параметр контент)
        $(_this).attr('data-content',data);
        // устанавливаем свойство show-ajax (флаг), который будет определять необходимо ли удалять атрибут data-content
        $(_this).prop('show-ajax',true);             
        // открыть popover
        $(_this).popover('show');
      }
    });
    return 'Загрузка...';
  }
});
  
$('[data-toggle="popover"]').on('shown.bs.popover', function () {
  // если элемент имеет свойство show-ajax... 
  if ($(this).prop('show-ajax')==true) {
    // устанавливаем свойству show-ajax значение false
    $(this).prop('show-ajax',false);
    // удаляем атрибут data-content      
    $(this).removeAttr('data-content');
  }
});

Спасибо, виртуозно получается!

Изменить цвет текста в уведомлении можно так (добавить в свой файл стилей CSS):

.popover {
  color: #ff0000; /* цвет текста */
}

Спасибо, огромное. Сидел уже почти ночью, сам не сообразил )

Привязывайте popover не к ячейки, а к содержимому ячейки, предварительно обернув его в какой-то элемент.

Получилось, спасибо большое!

Сам спросил — сам ответил)

Переделал вывод на тултипы, все заработало. Видимо popover еще как-то должен отдельно цеплять новый скрипт…

В статье все параметры перечислены. Для вставки HTML-содержимого используйте data-атрибут html:

<a class="btn btn-danger" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title="Заголовок" data-content="<p>Текст</p><img src='image.jpg' width='50'>">Кнопка</a>

<script>
// скрипт для инициализации popover после загрузки страницы
$(function () {
  $('[data-toggle="popover"]').popover();
})
</script>

Большое спасибо, Александр!

Здравствуйте. Не совсем понял описание. Поэтому поясните, что именно необходимо сделать? Т.е. имеется кнопка, которая открывает и закрывает всплывающую панель. Это панель относится к кнопке или какому-то другому элементу? Если необходимо совместить открытие и закрытие, то тогда используйте toggle. Лучше напишите, что Вы хотите реализовать, а не то как это было сделано.

Добрый вечер, Игорь.
Настроить количество секунд для анимации при появлении popover можно с помощью переопределения класса fade:

.popover.fade {
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear;
}

Вместо 0.15 секунд установите необходимое время.

Если Вам необходимо ещё на закрытие, то тогда наверно будет лучше изменить это в самом файле bootstrap.js (или bootstra.min.js). За это дело в файле bootstrap.js отвечает константа Tooltip.TRANSITION_DURATION в разделе Tooltip. Если измените её значения она повлияет как на открытие, так и на закрытие. Если необходимо установить разные значения, то необходимо будет найти в этом разделе строчки .emulateTransitionEnd(Tooltip.TRANSITION_DURATION) и установить в скобках необходимые значения в мс.

Ясно. Спасибо за ответ.

Добрый.
Для этого лучше использовать компонент alert, а не popover.
HTML-код:

<!-- кнопка Купить -->
<button id="btn-buy" class="btn btn-danger">Купить</button>
<!-- Сообщение -->
<div id="message" class="alert alert-danger" style="display:none; position:fixed; top:50%; left:50%;">Сообщение</div>

JavaScript-код:

$(function() {
  // при нажатию на кнопку btn-buy
  $('#btn-buy').click(function() {
    // 400мс - время появления, 6000мс задержка, 2000мс - исчезновение
    $('#message').fadeIn({'duration':400,'start':function(){
       $('#message').css('margin-left',-$(this).outerWidth()/2);
       $('#message').css('margin-top',-$(this).outerHeight()/2);
    }}
    ).delay(6000).fadeOut(2000);
  });
});

Стили элемента #message при желании можно вынести в отдельный файл.

Попробуйте настроить положение popover с помощью атрибута data-placement.

Здравствуйте, Денис.
Попробуйте обернуть скрипт в тег {literal}{/literal}. В этом случае весь текст внутри тэгов {literal}{/literal} не интерпретируется, а выводится как есть. А иначе фигурные скобки будут конфликтовать…

{literal}
<script>
$(function () {
  $('[data-toggle="popover"]').popover({html:'true'})
})
</script>
{/literal}

Здравствуйте, Владимир!
Ответы на Ваши вопросы:
1. Настройка отображения popover осуществляется с помощью атрибута data-placement, которая может принимать одно из четырёх значений: left, top, bottom, right.
Например:

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="...">
  ...
</button>

2. Создаём скрытый блок.
Например:

<div id="mypopover" style="display: none;">
  <!-- Содержимое, которое будем выводит в popover -->
  <div class="alert alert-danger">Содержимое...</div>
</div>

Создаём popover, при нажатии на который будет выводиться в нём содержимое элемента, идентификатор которого указан в data-contentwrapper:

<a class="btn btn-danger" data-toggle="popover" data-trigger="focus" title="Название Popover" data-contentwrapper="#mypopover">Мой popover</a>

Пишем скрипт для инициализации всех popover:

<script>
$(function () {
  $('[data-toggle="popover"]').popover({
    html:'true',
    content: function() {  return $($(this).data('contentwrapper')).html(); }
  })
})
</script>

3. Про события…
Необходимо написать скрипт:

<a tabindex="0" role="button" class="btn btn-lg btn-danger" data-container="body" data-
toggle="popover" data-contentwrapper=".div">Dismissible popover</a>
<div id="mypopover" style="display: none;">
  <!-- Содержимое, которое будем выводит в popover -->
  <div class="alert alert-danger">Содержимое...</div>
</div>

<script>
$(function () {
  $('[data-toggle="popover"]').popover({
    html:'true',
    content: function() {  return $($(this).data('contentwrapper')).html(); },
    trigger: 'click'
  })
});

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' &&
    !$(e.target).parents().is('.popover.in')) {
    $('[data-toggle="popover"]').popover('hide');
  }
});
</script>

Да, такое сделать возможно.

А с помощью какого встроенного функционала в bootstrap это удобнее всего не подскажите?
Чтоб было понятнее, я имею ввиду, когда эта панель целиком или частично находится за пределами видимости страницы. Например спрятана в правой части страницы, или же сверху и при клике на нее или какую то соотвествующую кнопку выдвигается и показывается в полной мере. Есть ли встроенный функционал у бутстрап, который бы помог такое реализовать

Извините, что не совсем понял Ваш вопрос.

Весь функционал Twitter Bootstrap сосредоточен в классах и плагинах, которые предназначены для решения наиболее распространённых задач стоящих перед разработчиками. Кроме этого он также содержит готовые компоненты.

Начнём с разметки Ваших блоков. Для их выполнения нужен HTML, классы Bootstrap, ну и стили CSS. Bootstrap не отменяет HTML или CSS, просто с ним (используя его классы) Вы можете это сделать немного быстрее и везде нормально отображающимся. Т.е. Bootstrap содержит классы, компоненты и плагины, которые работают во всех браузерах и на всех возможных устройствах. Что нельзя сказать про блоки, которые разработчик создаёт сам, т.к. проверить их во всех браузерах и на всех устройствах одну или двум разработчикам очень тяжело. Так что нет гарантии, что везде ваш блок будет отображаться нормально. Поэтому может, есть смысл попробовать переписать разметку этих блоков с использованием классов Bootstrap.

Ситуацию с динамической составляющей этого блока средствами Bootstrap не решить, т.к. такого плагина нет. Тут можно использовать jQuery.

В большинстве случаев, если Вы хотите реализовать какой-то дополнительный функционал, то необходимо либо искать готовые решения, либо создавать их самому (конечно с применением классов и плагинов Twitter Bootstrap).

Спасибо, за подробный ответ. Как разметку такого блока на bootstrap сделать я разобрался. Это гораздо быстрее чем самому верстать. Ну значит буду свой JQuery подключать. Просто думал, что возможно разработчики предусмотрели такие плагины, так как они сейчас довольно распространены.

Артем, есть сторонний плагин:
plugins.adchsm.me/slidebars/usage.php

Если это не тот вариант, то можно поискать варианты реализации в expo.getbootstrap.com и уже на основе кода примеров копать в нужную сторону.

Можно, вполне.

Из самого сложного, с чем столкнётесь — это блур бэкграунд. В идеале он должен быть динамическим, исходя из задачи иллюстрируемой на картинках. Как вариант html2canvas + gaussian blur и всё это в localStorage )). Ну или поиграться с нативным блуром через CSS, если у вас плашки поверх карусели.

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

Например, инициализируем popovers для элементов, которые имеют атрибут data-toggle=«popover».

<div data-toggle="popover" title="Заголовок popover сообщения" data-content="Текст popover сообщения"  
>...</div>
<img src="image1.png" alt="" data-toggle="popover" title="Заголовок popover сообщения" data- 
content="Текст popover сообщения">

<script>
$(function () {
  //указываем с помощью селектора, для каких элементов необходимо инициализировать popover
  $("[data-toggle='popover']").popover({
    //указываем когда будет отображаться popver. В данном случае при поднесении курсора к элементу
    trigger: 'hover'
  });
})

Т.е. с помощью вышеприведённого сценария у Вас будут инициализировать любые элементы, у которых есть данный атрибут:

data-toggle="popover"

Выбирать элементы, которые необходимо инициализировать, можно не только с помощью атрибута, а вообще как угодно.

Например, инициализировать Popover для всех изображений расположенных в контейнере с id=«comment»

$(function () {
  $("#comment img").popover({
    trigger: 'hover'
  });
});

Здравствуйте. Да можно, для этого необходимо включить соответствующий параметр (html:'true'):

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Заголовок" data-content="<p>Ссылка на сайт:</p><a href='https://itchief.ru'>itchief.ru</a>">popover</button>
<script>
$(function () {
  $('[data-toggle="popover"]').popover({html:'true'})
})
</script>

Так это-же просто :0 Как-бы включается поддержка Html.
Надо изучить JawaScript

Да, обязательно изучи.
Так как язык JavaScript – это неотъемлемая часть веб-страниц как HTML и CSS.
HTML – разметка страницы, CSS – оформление страницы (внешний вид), JavaScript — управление страницей.
Веб-страница без JavaScript — это то же самое, что автомобиль без руля.