Всплывающие подсказки начальной загрузки не работают

261

Я схожу с ума здесь.

У меня есть следующий HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

А всплывающая подсказка в стиле Bootstrap не отображается, просто обычная подсказка.

У меня bootstrap.css работает отлично, и я вижу там классы

У меня есть все соответствующие файлы JS в конце моего файла HTML:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

Я посмотрел на источник примера Bootstrap и не вижу ничего, что инициирует всплывающую подсказку где-либо там. Я предполагаю, что это должно сработать, или я что-то упустил здесь?

У меня есть модалы, оповещения и другие вещи, которые работают просто отлично, так что я не полный дебил;)

Спасибо за любую помощь!

twitter-bootstrap 
— Майк Бартлетт
источник
2
Подсказка инициируется в файле application.js в примере твиттеров. Можете ли вы опубликовать свой HTML? Хотелось бы взглянуть на то, как вы инициализируете скрипт.
— Андрес Ильич
2
Ааааа .... Я проигнорировал это, учитывая первый комментарий. Так что это должно работать: code<a href="#" rel="tooltip" title="A nice tooltip" class="tooltip-test"> тест </a> <br> <script> // tooltip demo $ (' .tooltip-test '). tooltip () </ script>
— Майк Бартлетт
1
не забудьте передать селектор опциям всплывающей подсказки,$('.tooltip-test').tooltip({ selector: "a" })
— Андрес Ильич
Спасибо Андрес. На самом деле мне не нужен селектор, я думаю, это потому, что класс a упоминается как tooltip-test.
— Майк Бартлетт
3
Без опции селектора всплывающая подсказка у меня не работает, вот пример, который я выложил: jsfiddle.net/VXctp , попробуйте его без селектора.
— Андрес Ильич

Ответы:

276

Подводя итог: активируйте всплывающие подсказки с помощью селекторов jQuery

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

На самом деле, вам не нужно использовать селектор атрибута, вы можете вызвать его для любого элемента, даже если его нет rel="tooltip"в его теге.

— Мануэль Эберт
источник
13
Для тех , кто работает с Rails, это уже определено в bootstrap.js.coffeeс $(".tooltip").tooltip(). Просто не забудьте включить //= require bootstrapв свой application.js.
— Slhck
6
Добавление класса .tooltip к любому элементу сломает подсказки для меня. Содержимое внутри элемента с классом .tooltip будет скрываться, и всплывающая подсказка будет отображаться, если мне удастся найти скрытый элемент с помощью мыши. Использование любого другого селектора или имени класса будет работать нормально. \
— Леонель Галан
4
@Leito правильно, bootstrap определяет стили для .tooltipи по умолчанию они невидимы. Вы можете использовать relатрибут или любой другой класс в качестве селектора.
— Мануэль Эберт
3
Да, вам нужны ОБА HTML-разметка и селекторы JS. Это не альтернативные способы применения всплывающих подсказок.
— ATSiem
1
Некоторые могут пытаться отобразить всплывающую подсказку в модальном режиме, и это работает не во всех версиях начальной загрузки. Если вы попробуете это на обычной странице, а не на модальной, и она работает, то вы знаете, что это проблема.
— mjnissim
212

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

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

Надеюсь это поможет!

— Маркус Хельшер
источник
20
Спасибо! Это сработало для меня. Каким-то образом другие решения на этой странице не работают для меня.
— Роман
1
Я с Романом. Это решение работает и с вариантами начальной загрузки css.
— DaveCS
Это сработало для меня. Ничто другое не пнул это в жизнь, пока я не попробовал это. Спасибо!
— BlakePetersen
1
Это сработало и для меня. Любая идея, почему $ ('[data-toggle = "tooltip"]'). Tooltip ({'place ':' top '}); не работает?
— ZeroCool
Спасибо, это сработало для меня. Просто убедитесь, что вы вставляете код между тегами <script> ПОСЛЕ того, как загружаете библиотеку JQuery.
— Джеральд Скотт,
31

Вам не нужны все файлы js отдельно

Просто используйте следующие файлы, если вы собираетесь использовать все функции начальной загрузки:

-bootstrap.css
-bootstrap.js

оба они могут быть найдены в http://twitter.github.com
и, наконец, -
Последняя версия jquery.js

Для Glyphicons вам нужно изображение

glyphicons-halfings.png и / или glyphicons-halfings-white.png (изображения белого цвета),
которые необходимо загрузить в папку / img / вашего веб-сайта (или) сохранить ее там, где вы хотите, но измените каталог папки внутри загрузчика .css

Для всплывающей подсказки вам нужен следующий скрипт внутри вашего <head> </head>тега

  <script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

Это оно...

— Хариш Кумар
источник
27

http://getbootstrap.com/javascript/#tooltips-usage

Функциональность подписки По соображениям производительности, всплывающая подсказка и всплывающая подсказка data-apis означают

Вы должны инициализировать их самостоятельно.

Один из способов инициализации всех всплывающих подсказок на странице - выбрать их по их атрибуту data-toggle:

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
</script>

поместив этот кусок кода в ваш HTML, вы можете использовать всплывающие подсказки

Примеры:

<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
— Макс О.
источник
2
Спасибо, что поделились этой концепцией подписки! Никогда не читайте это из каких-либо руководств.
— ДПП
Решение всех моих проблем с JQuery / Bootstrap
— DJ Burb
Приведенная ссылка отсутствует: пожалуйста, посмотрите на getbootstrap.com/docs/4.1/components/tooltips
— Гийом Хуста
20

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

присвойте своему элементу класс типа "подсказка-тест"

затем активируйте этот класс в своем теге javascript:

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
— Амир Солеймани
источник
Это было единственное решение, которое сработало для меня. Я использую data-original-title = "{{someAngularJSVar}}", чтобы обновить заголовок, и он работает безупречно.
— WKara
20

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $('[data-toggle=tooltip]').tooltip();
});

Это работа для меня.

— Игорь Швыдок
источник
1
Это предложение отлично сработало и для меня. Мне понравилось, потому что это просто и элегантно. Это позволяет вам продолжать использовать стандарты Bootstrap, как если бы плагин был инициализирован по умолчанию, как это происходит с элементами Dropdown и Tab. Я добавил JS, предложенный @Igor, в новый файл и связал его с оригинальным bootstrap.js
— Iago Rodríguez-Quintana
14

Если вы поступите так, $("[rel='tooltip']").tooltip();как предлагали другие ответы, вы активируете всплывающие подсказки только для элементов, которые в данный момент находятся в DOM. Это означает, что если вы собираетесь изменить DOM и вставить динамический контент позже, он не будет работать. Кроме того, это гораздо менее эффективно, поскольку устанавливает обработчик событий для отдельных элементов, а не использует делегирование событий JQuery. Поэтому лучший способ активировать всплывающие подсказки Bootstrap - это одна строка кода, которую вы можете поместить в готовый документ и забыть об этом:

$(document.body).tooltip({ selector: "[title]" });

Обратите внимание, что я использую titleкак селектор вместо rel=titleили data-title. Это имеет то преимущество , что он может быть применен ко многим другим элементам ( relкак предполагается , будет только для анкеров) , а также работает как «запасной вариант» для старых браузеров.

Также обратите внимание, что вам не нужно data-toggle="tooltip" атрибут, если вы используете приведенный выше код.

Всплывающие подсказки являются дорогими, потому что вам нужно обрабатывать события мыши для каждого из элементов. Это причина, почему они не включили его по умолчанию. Так что, если вы когда-нибудь решите закомментировать выше строки, ваша страница все равно будет работать, если вы используете атрибут title.

Если вы не хотите использовать атрибут title, я бы порекомендовал использовать чистое CSS-решение, такое как Hint.css, или проверить http://csstooltip.com, который вообще не требует кода JavaScript.

— Шиталь шах
источник
Я борюсь с этим, потому что динамическое поколение проходит несколько уровней глубоко. Значение href является динамически генерируемым содержимым, а результирующий идентификатор div основан на номере элемента, который соответствует значению href. Поэтому, если у меня есть страница ссылок типа элемента A, то у меня есть список элементов a-1, item a-2, item a-3, каждая из этих ссылок относится к отдельной странице элементов, но я хочу содержимое всплывающей подсказки для отображения динамического содержимого при наведении, чтобы пользователь мог получить представление об элементе, прежде чем щелкнуть полную ссылку.
— Мелани Самнер
Это было самым полезным. У меня была подсказка для привязки к значку, а библиотека значков имела какую-то асинхронную загрузку, поэтому она не могла связываться. Это было так странно, потому что это работало бы при использовании селектора класса, но не ID. Спасибо за помощь!
— Ник Вудхэмс
14

Это самый простой способ. Просто поместите это перед </body>:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

Посмотрите примеры, приведенные в документации Bootstrap о подсказках .

Например: 

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>
— Маркос Кассиано
источник
2
закройте атрибут type ... редактирование только одной опечатки - это PITA: S
— Мохд Абдул Муджиб
10

Всплывающая подсказка и всплывающее окно НЕ являются только плагинами CSS, такими как выпадающий список или индикатор выполнения. Чтобы использовать всплывающие подсказки и всплывающие окна, вы ДОЛЖНЫ активировать их с помощью jquery (читайте javascript).

Итак, допустим, мы хотим, чтобы всплывающее окно отображалось при нажатии кнопки HTML.

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

Тогда вам нужно иметь следующий код javascript для активации popover:

$('.popovers-to-be-activated').popover();

На самом деле вышеупомянутый код javascript активирует popover для всех элементов html, которые имеют класс «popovers-to-be-activated».

Разумеется, поместите вышеуказанный javascript в обратный вызов DOM-ready, чтобы активировать все всплывающие окна, как только DOM будет готов:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});
— Майянк Джайсвал
источник
5

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

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip();   
});
</script>

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

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

— Rush.2707
источник
4

Если все еще не решено. Использовать последнюю библиотеку Jquery, вам не понадобится ни один из селекторов jquery, если вы используете последнюю версию bootstrap 2.0.4 и jquery-1.7.2.js.

Просто используйте rel="tooltip" title="Your Title" data-placement=" "

Используйте верхний / нижний / левый / правый в размещении данных по вашему желанию.

— Хариш Кумар
источник
3

Я добавил jquery и bootstrap-tooltip.js в заголовок. Добавление этого кода в нижний колонтитул работает для меня! но когда я добавляю тот же код в заголовок, он не работает! 

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>
— Картик
источник
3
В этом случае DOM еще не загружен, поэтому все элементы могут отсутствовать на странице. Оберните код выше в$(function() { ... });
— johnml
3

Если с помощью Rails + Haml намного проще включить всплывающую подсказку, просто выполните:

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

То есть просто добавьте следующую строку в конце элемента.

:rel => "tooltip", :title => "Referential Guide"
— Андрес Калле
источник
Очень надеялся, что это сработает для меня, но, увы, этого не произошло.
— Турболад
Теперь я больше увлечен Djanto, чем Rails, но если вы вставите свой код, я могу попытаться дать вам несколько советов.
— Андрес Калле
3

В моем конкретном случае это не сработало, потому что я включал две версии jQuery. Один для начальной загрузки, а другой (другая версия) для Google Charts.

Когда я удаляю загрузку jQuery для диаграмм, она работает нормально.

— Dieter
источник
3

Я только добавил:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

ниже bootstrap.min.js и это работает.

— Andy.sin
источник
3

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

НОТА:

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

  • Порядок включения скриптов
  • Посмотрите, пытаетесь ли вы инициализировать элементы HTML, которые были удалены
  • Посмотрите, пытаетесь ли вы вызывать методы в файлах JS, которые вы больше не включаете

  • Посмотрите, включаете ли вы файл JS, который обеспечивает необходимую вам функциональность (не только для всплывающих подсказок, но и для любых компонентов, которые вы используете на странице).

    <head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

Отказ ЛЮБОГО из вышеперечисленных элементов может (и часто делает) препятствовать загрузке и / или запуску javascript, и это делает все в порядке и не работает.

РАБОЧИЕ ПРИМЕРЫ

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

Оригинальный HTML:

<span class="badge badge-sm badge-plain">Admin Mode</span>

Обычные подсказки

Если вы создаете всплывающие подсказки для HTML-элемента и используете всплывающие подсказки Plain Bootstrap, то вы будете нести ответственность за вызов инициализаторов всплывающей подсказки со своим собственным кодом JavaScript.

ПЕРЕД

<span class="badge badge-sm badge-plain">Admin Mode</span>

ПОСЛЕ

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

Initializer

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

Всплывающие подсказки шаблона начальной загрузки (например, INSPINIA)

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

    <script src="/Scripts/app/inspinia.js" />

В случае INSPINIA включенный скрипт автоматически инициализирует все всплывающие подсказки, выполнив следующий код JavaScript после завершения загрузки документа:

// Tooltips demo
$('.tooltip-demo').tooltip({
    selector: "[data-toggle=tooltip]",
    container: "body"
});

Из-за этого вам НЕ нужно инициализировать подсказки в стиле INSPINIA самостоятельно. Но вам НЕОБХОДИМО отформатировать ваши элементы определенным образом. Инициализатор ищет элементы HTML tooltip-demoв classатрибуте, а затем вызывает tooltip()метод для инициализации любых дочерних элементов, для которых data-toggle="tooltip"определен атрибут .

Для нашего примера значка, поместите внешний элемент вокруг него (например, <div>или <span>) , который имеет class="tooltip-demo", то место data-toggle, data-placementи titleатрибутов для фактической подсказки внутри элемента , который является значком. Измените исходный HTML сверху, чтобы он выглядел примерно так:

ПЕРЕД

<span class="badge badge-sm badge-plain">Admin Mode</span>

ПОСЛЕ

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

Initializer

None

Обратите внимание, что любые дочерние элементы внутри <span class="tooltip-demo"> элементе будут иметь правильно подготовленную подсказку. Я мог бы иметь три дочерних элемента, все нуждающиеся во всплывающих подсказках, и поместить их в один контейнер.

Несколько предметов, каждый с всплывающей подсказкой

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

Лучшее использование для этого было бы добавить class="tooltip-demo"к <td>или внешней <div>или <span>.

Обычные всплывающие подсказки при использовании шаблона

Если вы используете INSPINIA, но не хотите добавлять дополнительные внешние элементы <div>или <span>теги для создания всплывающих подсказок, вы можете использовать стандартные всплывающие подсказки Bootstrap без вмешательства в шаблон. В этом случае вы будете нести ответственность за инициализацию подсказок самостоятельно. Тем не менее, вы должны использовать пользовательское значение в classатрибуте, чтобы идентифицировать элементы подсказки. Это не даст инициализатору всплывающей подсказки вмешиваться в элементы, на которые влияет INSPINIA. В нашем примере давайте используем standalone-tt:

ПЕРЕД

<span class="badge badge-sm badge-plain">Admin Mode</span>

ПОСЛЕ

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

Initializer

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>
— Майк Стиллион
источник
2

Если вы создаете свой HTML, который содержит всплывающую подсказку с javascript, а затем вставляете ее в документ, вы должны активировать всплывающую подсказку / подсказку ПОСЛЕ того, как вы вставили HTML в документ, а не при загрузке документа ...

— chri_chri
источник
2

Вы должны поместить всплывающую подсказку javascript после html. как это :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

Или используйте $ (document) .ready: 

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

Всплывающая подсказка не работает, потому что вы поместили всплывающую подсказку html перед javascript , поэтому они не знают, существует ли javascript для всплывающей подсказки. На мой взгляд, скрипт читается сверху вниз.

— Увеличить
источник
2

У меня была похожая проблема, особенно если вы работаете в контейнере кнопок, например в вертикальном контейнере кнопок. В этом случае вы должны установить контейнер как «тело»

I have added a jsfiddle example

пример

— Шон Вейдер
источник
1

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

Подсказки включены по соображениям производительности, поэтому вы должны инициализировать их самостоятельно. Один из способов инициализации всех всплывающих подсказок на странице - выбрать их по атрибуту data-toggle:

  $('[data-toggle="tooltip"]').tooltip()
— Рахиль Ахмад
источник
0

Добавьте data-toggle="tooltip"в любой элемент, который вы хотите с помощью всплывающей подсказки.

— Калум Чайлдс
источник
0

Вам нужно сделать следующее. Добавить

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

код где-то на вашей странице (желательно в <head>разделе).

Также добавьте data-toggle: "tooltip"все, что вы хотите включить с ним.

— Калум Чайлдс
источник
0

Вы можете использовать Popper.js

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

И вызвать функцию всплывающей подсказки:

$('document').ready(function(){
    $('[data-toggle=tooltip]').tooltip();
});
— Мохсен Ньютоа
источник
-2

Быстрая и легкая альтернатива плагину Bootstrap:

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT:

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
});

Метка / текст должен быть заключен в оболочку класса "mytooltip". Эта оболочка должна иметь идентификатор.

После метки есть текст подсказки, заключенный в div класса "mytooltiptext" и идентификатор, состоящий из идентификатора родительской оболочки + "_tttext". Другие варианты для селекторов могут быть использованы.

Надеюсь, поможет.

— jdisla
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.