I would like to have 2 different configurations of addthis on the same page.
Take note that I'm using the new Addthis, where the code looks like this:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx" async="async"></script>
<div class="addthis addthisBlogue clearfix">
<div class="addthis_sharing_toolbox"></div>
</div>
What I'm trying to do is have 1 that have the share numbers tooltips and the other doesn't
Is it possible?
Since AddThis creates HTML elements that contain the count 'tooltip' (it's not actually a tooltip) with a single class or ID element, if you want to be really specific (i.e. choose what to hide exactly where you have two or more AddThis instances on a page) you could:
display: none
to hide the parent social media count element only inside that div.Seems obvious, but For example, on this page if you inspect (e.g. in Chrome) the rendered Facebook and Twitter AddThis elements and add 'display: none' to the .pluginCountButton
and .count-o
styles that contain the elements you want to hide, as expected: they vanish from the display.
So if you nest your AddThis instances inside a uniquely-identified div (or any parent element) then you could simply target the one you want to hide like this:
#hiddencount .pluginCountButton,
#hiddencount .count-o {
display: none;
}
You'd need to locate the equivalent .pluginCountButton
and .count-o
elements for your version and instance—each social media icon has it's own so you'd have to identify each, as in the above example. You may also need more specificity between #hiddencount
and the count container to get the style to apply.
NOTE: without a working example with the count links showing, this is untested. If you have a working example, I'd be happy to test it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With