Disabling a cboxTitle Element in jQuery Colobox

Question

I have an icon on my webpage with the following attributes:

<a class="iframe cboxElement" href="contact.html" title= "Contact Performance Analytics">
<i class="fa fa-phone-square fa-2x" aria-hidden="true"></i>
</a>

The reason for the title is to display on mouse over but when I open the colorbox it shows as it's title. How could I hide or disable it?

I adjusted my script tag as below but I must be doing something wrong:

<script> 

            $(document).ready(function(){
                $(".iframe").colorbox({iframe:true, width: "700px", height:"300px"});
                $('.iframe cboxElement').colorbox({title: '' });
            });



        </script>

Answer 1

You can define a null value while initializing the colorbox plugin, like:

$('.selector').colorbox({
  title: '' // Setting Title to null
});

Have a look at the demo snippet below:

$('.link').colorbox({
  title: ''
});

<link href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" rel="stylesheet"/>

<a href="#" class="link" title="This is a link">Link</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>

Update:

You are using wrong syntax for select the element

Use:

$(document).ready(function(){
  $('.iframe.cboxElement').colorbox({
    title: '',
    iframe: true,
    width: "700px",
    height:"300px"
  });
});

Instead of:

$(document).ready(function(){
  $(".iframe").colorbox({iframe:true, width: "700px", height:"300px"});
  $('.iframe cboxElement').colorbox({title: '' });
});

Hope this helps!