Regarding the description of the options, it is recommended to update

[y377]

The document description about the options is currently not conducive to reading, the page is too long, please use MD to create a branch, and please review whether there are any text errors

option	value	description
tocSelector	.js-toc	Where to render the table of contents
tocElement	element	Or, you can pass in a DOM node instead
contentSelector	.js-toc-content	Where to grab the headings to build the table of contents
contentElement	element	Or, you can pass in a DOM node instead
headingSelector	'h1, h2, h3'	Which headings to grab inside of the contentSelector element
ignoreSelector	'.js-toc-ignore'	Headings that match the ignoreSelector will be skipped
hasInnerContainers	false	For headings inside relative or absolute positioned containers within content
linkClass	'toc-link'	Main class to add to links
extraLinkClasses	''	Extra classes to add to links
activeLinkClass	'is-active-link'	Class to add to active links,the link corresponding to the top most heading on the page
listClass	'toc-list'	Main class to add to lists
extraListClasses	"	Extra classes to add to lists <ol> or <ul>
isCollapsedClass	'is-collapsed'	Class that gets added when a list should be collapsed
collapsibleClass	'is-collapsible'	Class that gets added when a list should be able to be collapsed but isn't necessarily collapsed
listItemClass	'toc-list-item'	Class to add to list items
activeListItemClass	'is-active-li'	Class to add to active list items
collapseDepth	0	How many heading levels should not be collapsed.For example, number 6 will show everything since there are only 6 heading levels and number 0 will collapse them all. The sections that are hidden will open and close as you scroll to headings within them.
scrollSmooth	true	Smooth scrolling enabled
scrollSmoothDuration	420	Smooth scroll duration
scrollSmoothOffset	0	Smooth scroll offset
scrollEndCallback	function (e) {}	Callback for scroll end
headingsOffset	1	Headings offset between the headings and the top of the document (this is meant for minor adjustments)
throttleTimeout	50	Timeout between events firing to make sure it's not too rapid (for performance reasons)
positionFixedSelector	null	Element to add the positionFixedClass to
positionFixedClass	'is-position-fixed'	Fixed position class to add to make sidebar fixed after scrolling down past the fixedSidebarOffset
fixedSidebarOffset	'auto'	fixedSidebarOffset can be any number but by default is set to auto which sets the fixedSidebarOffset to the sidebar element's offsetTop from the top of the document on init
includeHtml	false	includeHtml can be set to true to include the HTML markup from the heading node instead of just including the textContent
includeTitleTags	false	includeTitleTags automatically sets the html title tag of the link to match the title. This can be useful for SEO purposes or when truncating titles
onClick	function (e) {}	onclick function to apply to all links in toc. will be called with the event as the first parameter, and this can be used to stop, propagation, prevent default or perform action
orderedList	true	orderedList can be set to false to generate unordered lists (ul) instead of ordered lists (ol)
scrollContainer	null	If there is a fixed article scroll container, set to calculate titles' offset
skipRendering	false	prevent ToC DOM rendering if it's already rendered by an external system
headingLabelCallback	false	Optional callback to change heading labels.For example it can be used to cut down and put ellipses on multiline headings you deem too long.Called each time a heading is parsed. Expects a string and returns the modified label to display.Additionally, the attribute data-heading-label may be used on a heading to specify a shorter string to be used in the TOC.function (string) => string
ignoreHiddenElements	false	ignore headings that are hidden in DOM
headingObjectCallback	null	Optional callback to modify properties of parsed headings. The heading element is passed in node parameter and information parsed by default parser is provided in obj parameter. Function has to return the same or modified obj. The heading will be excluded from TOC if nothing is returned.function (object, HTMLElement) => object / void
basePath	''	Set the base path, useful if you use a base tag in head
disableTocScrollSync	false	Only takes affect when tocSelector is scrolling, keep the toc scroll position in sync with the content
tocScrollOffset	0	Offset for the toc scroll (top) position when scrolling the page. Only effective if disableTocScrollSync is false.

[y377]

May I ask if you can customize other attributes for link(<a> Element)?Forgive me for being new to JS, I don't know how to use your functions yet Expected value:

<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown link
   </a>

thanks!

[tscanlin]

Hey thanks for the suggestion! I will consider the new format. Even though the current format is longer I do like that it works better on mobile and is easier to update. Currently it is not possible to customize attributes with tocbot, but you could use js programmatically to add them, also maybe the scrollEndCallback may be helpful for you.

[y377]

Can you give me an example for my reference? (After all, I am a new JS driver) But through my brain opening, I can make the tocbot shine. 🤭

[tscanlin]

Sure, can you give me more information about your use case first? I'd like to understand what you hope to accomplish.

[y377]

Of course. Just a moment, please

[y377]

---

First of all, I want Hover Tips, because there are no other attributes, I can't get it, even if I get it through js, I need to write more JS, and I already have some JS functions, writing too much JS, will add extra overhead, Then with the hover prompt, I will migrate the anchor point to the table of contents (I am opposed to the anchor point on the content of the text, too many extra characters or icons will distract the reader, I want the reader to have a near-perfect immersive reading) , when the user views the catalog and clicks to copy the anchor point, it is convenient for sharing or collection. A post may only have a few hundred words to be signed, and a complex product document may have tens of thousands or even hundreds of thousands of words. Let's imagine that a user or reader (reading the product documentation) asks a question and doesn't know how to solve it. He has not read the relevant content. The customer service (document owner) first quickly locates through the directory, and then copies it to the user/reader with one click. . If the customer service (document owner) has forgotten the explanation of this "proper noun" at this time, he also needs Hover Tips, and then checks it. After he confirms, he will copy it to the user/reader with one click. Such logic will be very convenient for readers and document owners. In addition, the ideal reading should be immersive (the text should only contain the text itself), in addition to pure text content (such as novels, etc.), other documents (such as technical tutorials, or instructions for the use of electronic digital products) should contain interactive design. I am very interested in the concept of interactive design, and I will always try to explore it, and the interactive design itself may occupy more text layout space, especially the screen of mobile phone users is very small, we need to migrate out irrelevant content, at this time More additions to directory functions are needed, and attributes are required if there are additions. This is the idea of ​​my custom attributes. I think the directory should take on more responsibilities. For example, as shown in the figure below, the superscript [4][5][6] of Wikipedia will distract readers, and it does not take into account immersive reading.When the reader sees this prompt, he may click habitually and jump to another url at this time. When he enters that page, there will be more hover prompts. He clicks again and jumps again, and so on. Maybe he has forgotten his original intention (the content that needs to be checked), which will waste the reader's time. He originally just wanted to learn the use of JavaScript functions, and his page at this time is the development history of Unix! Such a design is irresponsible! If hover prompts (including but not limited to anchors, superscript urls, Wikipedia-like [4][5][6], drop-down menus, etc.) are migrated to the table of contents, let readers choose what they are interested in first Content.

---

---

I'm getting a bit desperate today because I saw you said no custom attributes, and just before you replied, I'm learning ruby urgently (it's going to take up a lot of my time), just to improve jekyll-toc (another directory) , but seeing your reply, I feel a little hopeful, if you can try to add a custom attribute, I can quickly make an example for you, so that you can understand my intention more conveniently! What makes me miserable is that without the custom attribute of toc, I can't do the example! Because I use Jekyll, it needs to write code first, then build

---

For the content of several million words, (nearly perfect) use toc to make grandpa directory (full content)→dad directory (branch content)→my directory (fragmented content)

let's do it! 🤭

[tscanlin]

Hi, thanks for the feedback. I've been on vacation so sorry for my delay in responding.

I want Hover Tips, because there are no other attributes, I can't get it, even if I get it through js, I need to write more JS, and I already have some JS functions, writing too much JS, will add extra overhead

Regarding your feedback about hover tips, I think this is out of scope for this library which is just meant for providing the table of contents. But it sounds like an interesting idea for another library / project. Unfortunately I don't currently have time to take up such an endeavor, but I hope you are able to figure out a solution.

[y377]

Hi, thanks for the feedback. I've been on vacation so sorry for my delay in responding.

I want Hover Tips, because there are no other attributes, I can't get it, even if I get it through js, I need to write more JS, and I already have some JS functions, writing too much JS, will add extra overhead

Regarding your feedback about hover tips, I think this is out of scope for this library which is just meant for providing the table of contents. But it sounds like an interesting idea for another library / project. Unfortunately I don't currently have time to take up such an endeavor, but I hope you are able to figure out a solution.

Hey, nice to see you again, sorry if I interrupted your vacation. You may have misunderstood, I don't want hover prompts, I just use hover prompts as a metaphor, what I expect is to add other attributes, for example, I want to add an aria-expanded="false" to the element

[tscanlin]

No worries, I'm back now. Oh, I think I did misunderstand then, I wasn't really sure where the hovertips you mentioned would go. But, if you were to add other attributes, is that the only one you would need? Also wouldn't you expect to be able to change that value dynamically on scroll or just statically / always have it be aria-expanded="false"?

[y377]

 <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
 </a>

Hi, I didn't expect you to reply so quickly! Let me organize my bad English again: For example, for this A element, currently TOCBOT cannot add the following three attributes (including attribute values). The expected effect is that developers can add 1 or 2 or 3 or more attributes (including attribute values) role="button" and data-bs-toggle="dropdown" and aria-expanded="false"

[tscanlin]

No worries, your english is great! :) And thanks for the extra detail, that is helpful. How about if a callback function was added that would pass the current and past link nodes as callback arguments? Could that handle your use case?

Something like: scrollChangeCallback(currentNode, previousNode) { /*add/adjust attributes here*/ }

Also, CC: @tina513 ^ curious if you have thoughts / comments that could be helpful here, maybe I'm missing something.

[y377]

tocbot.init({
    tocSelector: ".js-toc",
    contentSelector: ".js-toc-content",
    headingSelector: "h1, h2, h3, h4, h5",
    hasInnerContainers: true,
    linkClass: "link-secondary",
    extraLinkClasses: "text-decoration-none",
    activeLinkClass: "link-danger",
    listClass: "list-unstyled",
    extraListClasses: "ol", //ol ul
    orderedList: false,
    a_element_Custom_attribute_1: ["role", "button"],                                 //Add custom attribute 1 to element a
    a_element_Custom_attribute_2: ["data-bs-toggle", "dropdown"],         //Add custom attribute 2 to element a
    a_element_Custom_attribute_3: ["aria-expanded", "false"],                   //Add custom attribute 3 to element a
})

Since I don't know enough JavaScript, I don't quite understand the formula you gave me, so I will use the above code block to give you an example.

[tscanlin]

Thanks for the example! That is very helpful for explaining. I guess I'm wondering, for aria-expanded wouldn't you expect that to turn from false to true when scrolled to? how do you imagine expressing that? Also, what if someone wanted to change the z-index or some other non-boolean attribute? How would you imagine that working?

[y377]

Hi, I'm sorry to keep you waiting. 2023/01/22 - 2023/01/26 is the Chinese Spring Festival (the biggest festival in China). According to tradition, we need to pay a New Year's greetings to our elders. We may not have time to work on code development, but I will spare time as soon as possible

[y377]

Hi, I'm back. I'm using the hard-coded test case. I'll clean up my language and get back to you when I'm done, or satisfied