Tell us what you are trying to do? Change the styling of tooltips with CSS
Is there any documentation that you are following? No
Is there a similar example that we can see? No
What is the link to your site? Can give in a private message
Hi! I am using the following code to generate a tooltip on hover in a content template:
<a href="#" data-toggle="tooltip" title='[types field='ys301-notes'][/types]'><span class="moduleDot [types field='ys301-status' output='raw'][/types]"></span></a>
I placed the following code in my theme header:
<!-- To enable Tooltips in Toolset -->
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$('[data-toggle="tooltip"]').tooltip()
});
</script>
This works well ?
However, how can i change the position and styling of the tooltip? Is there any documentaion of the html elements of the tooltip can refer to?
I've tried this, but it doesn't seem to have any affect:
.tooltip .tooltip-inner {
background-color: #000;
color:#FFF;
padding:10px;
}
Thanks in advance!
This is Custom CSS/JS that is not under our Support Umbrella:
https://toolset.com/toolset-support-policy/
You can either address your span class or give the href an ID or class, then address that.
Similarly, you can address tooltips:
hidden link
Hi Beda.. strange, I can't seem to affect the styling of the tooltip at all by targeting any of the potential html elements. However, I understand this is beyond the scope of Toolset support, so I'll work it out somehow. Perhaps my setup is wrong in the first instance. Thanks for pointing me in the right direction!
