0

I have the following HTML:

<a class="rounded" data-trigger="hover" data-toggle="popover"
data-html="true" data-placement="right" data-title="some data title"
data-content="some data content" href="#" onclick="return false;"
onmouseover="onMouseOver();" onmouseout="onMouseOut();">
    <i class="fas fa-info-circle fa-sm" aria-hidden="true" style="color: var(--tint-color);"></i>
</a>

<script>
  function onMouseOver() { console.log('onMouseOver') }
  function onMouseOut() { console.log('onMouseOut') }
</script>

which I repeatedly call with different values of data-title and data-content. Is there a way to have a custom tag such as:

<popover data-title="some data title" data-content="some data content"></popover>

Is this the best method for achieving this, or is making a CSS class more suitable?

ajrlewis
  • 2,968
  • 3
  • 33
  • 67

1 Answers1

0

You can't add custom HTML tags, but you can add "id" or "class" to any HTML tag. For example, instead of:

<popover data-title="some data title" data-content="some data content"></popover>

Do:

<div id="popover" data-title="some data title" data-content="some data content"><div>

You can then select your customized div using jQuery:

<script>$("#popover").mouseover(function (){ console.log("onMouseOver")});</script>

If you need more than one custom item, that must behave in the exact same way, you can then do this:

     <div class="popover" data-title="some data title" data-content="some data content"><div>
 <script>$(".popover").mouseover(function (){console.log("onMouseOver")});</script>
Siluxmedia
  • 27
  • 4